/* Selected-design fidelity layer. Loaded last so the confirmed layouts win. */
:root {
  --container: 1280px;
  --color-canvas: #fbfaf6;
  --color-line: #dfe6e1;
  --color-emerald: #07654f;
  --color-emerald-strong: #034c3c;
  --color-emerald-soft: #edf7f2;
  --color-pistachio: #c8dc58;
  --shadow-low: 0 4px 14px rgba(17, 54, 43, .05);
}

body { font-size: 14px; }
[hidden] { display: none !important; }
.container { width: min(calc(100% - 48px), var(--container)); }
.site-header { min-height: 104px; background: #075b48; }
.header-main { min-height: 64px; grid-template-columns: 220px minmax(360px, 560px) 1fr; }
.brand { font-size: 21px; }
.brand-mark { width: 42px; height: 42px; }
.header-search { height: 38px; }
.site-nav { height: 40px; gap: 38px; }
.site-nav a { height: 40px; font-size: 14px; }
.page-main { padding: 22px 0 48px; }
.breadcrumb { margin-bottom: 12px; font-size: 13px; }
.page-heading { margin-bottom: 16px; }
.page-heading h1 { font-size: 28px; }
.page-lead { margin-top: 4px; font-size: 13px; }
.compact-heading { align-items: center; }
.section { margin-top: 16px; padding: 18px; border-radius: 4px; box-shadow: none; }
.section-heading { margin-bottom: 14px; }
.section-heading h2 { font-size: 19px; }
.section-heading h2::before { height: 17px; }
.button,.button-secondary,.button-quiet { min-height: 38px; padding-inline: 18px; border-radius: 3px; }
.book-grid { gap: 18px 14px; }
.book-cover { aspect-ratio: 3 / 4; border-radius: 3px; }
.book-name { margin: 7px 0 2px; font-size: 14px; }
.book-meta,.book-update { font-size: 12px; line-height: 1.5; }
.site-footer { padding-top: 26px; color: rgba(255,255,255,.8); background: #005544; border-top: 0; }
.footer-grid { grid-template-columns: repeat(4, 1fr) 1.05fr 1.3fr; gap: 24px; }
.site-footer .footer-title { color: #fff; }
.site-footer .footer-links { color: rgba(255,255,255,.76); }
.site-footer .footer-follow strong { display: block; margin-top: 12px; color: #fff; font-size: 15px; line-height: 1.65; }
.site-footer .footer-symbols { justify-content: flex-start; margin: 0; color: #fff; }
.site-footer .footer-note { grid-template-columns: 1fr 58px; padding: 10px 0; color: #40382c; background: transparent; border: 0; }
.site-footer .footer-note span { align-self: start; padding: 10px 12px; background: #fff8df; border: 1px solid #eadba9; transform: rotate(-4deg); }
.site-footer .footer-bottom { margin-top: 22px; padding-top: 14px; color: rgba(255,255,255,.68); border-top-color: rgba(255,255,255,.12); }

/* Home A: reproduce the selected desktop composition. */
.home-page .home-hero { margin-top: 2px; grid-template-columns: minmax(0, 2.12fr) minmax(300px, .78fr); gap: 14px; align-items: stretch; }
.home-page .hero-feature { min-height: 0; aspect-ratio: 1.6 / 1; border-radius: 4px; }
.home-page .hero-feature::after { background: linear-gradient(90deg, rgba(20,13,8,.08) 0%, rgba(20,13,8,.18) 42%, rgba(14,10,8,.88) 100%); }
.home-page .hero-feature-image { object-position: center; }
.home-page .hero-feature-body { width: 43%; min-height: 100%; margin-left: auto; padding: 52px 48px 48px 24px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.home-page .hero-feature-body h1 { margin: 0 0 16px; max-width: 100%; font-family: "STKaiti", "KaiTi", serif; font-size: 46px; line-height: 1.22; text-wrap: balance; }
.home-page .hero-tags { margin: 0 0 16px; gap: 8px; }
.home-page .hero-tag { padding: 4px 9px; color: #f2b43f; background: rgba(16,11,8,.26); border: 1px solid rgba(242,180,63,.86); font-size: 12px; }
.home-page .hero-feature-body .hero-latest { margin: 0 0 12px; color: rgba(255,255,255,.9); font-size: 14px; line-height: 1.5; }
.home-page .hero-latest a { color: inherit; }
.home-page .hero-feature-body .hero-summary { margin: 0 0 22px; color: rgba(255,255,255,.82); font-size: 14px; line-height: 1.78; }
.home-page .hero-feature .button { min-width: 188px; min-height: 54px; justify-content: center; align-self: center; margin-top: 2px; font-size: 18px; }
.home-page .hero-arrow { position: absolute; z-index: 2; top: 50%; width: 58px; height: 88px; display: grid; place-items: center; color: #fff; background: rgba(5,12,10,.28); transform: translateY(-50%); }
.home-page .hero-arrow [data-lucide] { width: 34px; height: 34px; stroke-width: 2.4; }
.home-page .hero-arrow-left { left: 0; }
.home-page .hero-arrow-right { right: 0; }
.home-page .hero-dots { position: absolute; z-index: 2; bottom: 14px; left: 50%; display: flex; gap: 9px; transform: translateX(-50%); }
.home-page .hero-dots i,.home-page .hero-dots i.is-active { width: 9px; height: 9px; display: block; background: rgba(255,255,255,.66); border-radius: 50%; }
.home-page .hero-dots i.is-active { background: #fff; }
.home-page .hero-ranking { padding: 20px 18px 14px; border-radius: 4px; }
.home-page .hero-ranking h2 { margin: 0 0 8px; font-size: 19px; }
.home-page .hero-ranking .compact-rank-item { min-height: 91px; grid-template-columns: 30px 52px minmax(0,1fr); gap: 10px; padding: 8px 0; }
.home-page .hero-ranking .compact-rank-cover { width: 52px; height: 70px; border-radius: 3px; }
.home-page .compact-rank-item:nth-child(-n + 3) .compact-rank-number { width: 27px; height: 27px; display: grid; place-items: center; color: #fff; border-radius: 3px; }
.home-page .compact-rank-item:nth-child(1) .compact-rank-number { background: #ff5b4f; }
.home-page .compact-rank-item:nth-child(2) .compact-rank-number { background: #f49b25; }
.home-page .compact-rank-item:nth-child(3) .compact-rank-number { background: #e5bb33; }
.home-page .compact-rank-name { font-size: 14px; }
.home-page .compact-rank-meta { margin-top: 2px; font-size: 11px; }
.home-page .compact-rank-views { margin-top: 2px; color: var(--color-ink-soft); font-size: 11px; }
.home-page .home-ticker { min-height: 48px; margin-top: 12px; padding-inline: 18px; border-radius: 3px; }
.home-page .home-ticker strong { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.home-page .home-ticker strong svg { display: block; width: 16px; height: 16px; flex: 0 0 16px; }
.home-page .home-ticker-items { font-size: 13px; }
.home-page .home-book-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 18px 13px; }
.home-page .scene-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; }
.home-page .scene-card { min-height: 80px; padding: 12px 16px; display: grid; grid-template-columns: 46px 1fr; justify-items: stretch; text-align: left; gap: 12px; border-radius: 3px; }
.home-page .scene-icon { width: 46px; height: 46px; }
.home-page .scene-card > span:last-child > span { display: block; margin-top: 3px; }
.home-page .chapter-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 34px; }
.home-page .chapter-feed-item { min-height: 42px; padding: 9px 4px; }
.home-page .home-columns { grid-template-columns: 1.5fr .9fr .72fr; gap: 14px; }
.home-page .home-columns > .section { padding: 16px; }
.home-page .home-easy-card .book-meta { color: var(--color-emerald); }
.home-page .easy-book-summary { min-height: 38px; margin: 5px 0 6px; color: var(--color-ink-soft); font-size: 11px; line-height: 1.65; }
.home-page .easy-book-status { color: var(--color-ink-soft); font-size: 11px; }
.home-page .rank-list-item { min-height: 39px; }
.home-page .rank-list-item:nth-child(-n + 3) .number { width: 24px; height: 24px; display: grid; place-items: center; color: #fff; border-radius: 3px; }
.home-page .rank-list-item:nth-child(1) .number { background: #ff5b4f; }
.home-page .rank-list-item:nth-child(2) .number { background: #f49b25; }
.home-page .rank-list-item:nth-child(3) .number { background: #e5bb33; }
.home-page .home-complete-list .compact-rank-item { grid-template-columns: 46px minmax(0,1fr); min-height: 65px; }
.home-page .home-complete-list .compact-rank-item .compact-rank-number { display: none; }
.home-page .home-complete-list .compact-rank-cover { width: 42px; height: 56px; }

/* Library A */
.library-page { background: #fff; }
.library-page .page-main { padding-top: 18px; }
.library-page .breadcrumb { margin-bottom: 14px; }
.library-page .page-heading { margin-bottom: 18px; }
.library-page .page-heading h1 { font-size: 28px; line-height: 1.22; }
.library-page .page-lead { color: var(--color-ink-soft); }
.library-page .filter-panel { margin-top: 0; padding: 0; overflow: hidden; border-radius: 4px; }
.library-page .filter-row { min-height: 55px; display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: center; gap: 0; padding: 0 18px; border-top: 0; border-bottom: 1px solid var(--color-line); }
.library-page .filter-row:last-child { border-bottom: 0; }
.library-page .filter-label { width: auto; color: #22312c; font-weight: 800; }
.library-page .filter-options { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 26px; }
.library-page .filter-options a { min-width: 72px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 5px 10px; border-radius: 3px; }
.library-page .filter-options a:first-child { min-width: 58px; }
.library-page .filter-options a:hover,
.library-page .filter-options .is-active { color: #fff; background: #0b9479; }
.library-page .library-results { margin-top: 22px; }
.library-page .library-toolbar { min-height: 54px; margin-bottom: 24px; padding: 8px 14px; background: #fff; border: 1px solid var(--color-line); border-radius: 4px; }
.library-page .library-sort-tabs { display: flex; align-items: center; gap: 18px; }
.library-page .library-sort-tabs a { min-width: 82px; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 6px 14px; color: var(--color-ink-soft); border-radius: 3px; }
.library-page .library-sort-tabs a:hover,
.library-page .library-sort-tabs .is-active { color: #fff; background: #0b9479; }
.library-page .library-total { color: var(--color-ink-soft); }
.library-page .library-book-grid { --library-card-width: clamp(122px, calc((100vw - 296px) / 5), 170px); grid-template-columns: repeat(5, var(--library-card-width)); justify-content: space-between; gap: 18px 0; padding: 0 16px; }
.library-page .library-card { overflow: hidden; background: #fff; border: 1px solid var(--color-line); border-radius: 3px; }
.library-page .library-card .book-cover { aspect-ratio: 3 / 4; border-radius: 0; }
.library-page .library-card .book-cover img { object-position: center; }
.library-page .library-card-body { padding: 8px 9px 10px; }
.library-page .library-card-title-row { min-width: 0; display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
.library-page .library-card .book-name { min-width: 0; flex: 1; margin: 0; overflow: hidden; font-size: 15px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.library-page .library-card-author { margin: 0 0 7px; color: var(--color-ink-soft); font-size: 12px; }
.library-page .library-card-tags { min-height: 22px; display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 7px; }
.library-page .library-card-tags span { min-height: 20px; display: inline-flex; align-items: center; padding: 1px 6px; color: #0a846e; background: #f4fbf8; border: 1px solid #bfe0d7; border-radius: 2px; font-size: 11px; }
.library-page .library-card-chapter { display: block; margin-bottom: 3px; color: var(--color-ink-soft); font-size: 12px; }
.library-page .library-card-status { margin: 0; color: #0a846e; font-size: 12px; }
.library-page .library-new-badge { min-width: 31px; height: 17px; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; color: #fff; background: #ff5b4f; border-radius: 2px; font-size: 9px; font-weight: 800; }
.library-page .pager { margin-top: 24px; }

@media (max-width: 1000px) {
  .library-page .page-main { padding-top: 8px; }
  .library-page .breadcrumb { margin-bottom: 8px; font-size: 12px; }
  .library-page .page-heading { margin-bottom: 12px; }
  .library-page .page-heading h1 { font-size: 22px; }
  .library-page .page-lead { margin-top: 2px; font-size: 11px; line-height: 1.45; }
  .library-page .filter-row { min-height: 44px; grid-template-columns: 54px minmax(0, 1fr); padding-inline: 14px; }
  .library-page .filter-label { font-size: 11px; }
  .library-page .filter-options { flex-wrap: nowrap; gap: 7px; }
  .library-page .filter-options a,
  .library-page .filter-options a:first-child { min-width: 0; min-height: 26px; padding: 3px 10px; font-size: 11px; white-space: nowrap; }
  .library-page .library-results { margin-top: 16px; }
  .library-page .library-toolbar { min-height: 45px; margin-bottom: 11px; padding: 5px 12px; }
  .library-page .library-sort-tabs { gap: 10px; }
  .library-page .library-sort-tabs a { min-width: 70px; min-height: 31px; padding: 4px 10px; font-size: 11px; }
  .library-page .library-total { font-size: 11px; }
  .library-page .library-book-grid { justify-content: start; column-gap: 45.5px; row-gap: 6px; padding-inline: 21px; }
  .library-page .library-card-body { height: 95px; padding: 6px; overflow: hidden; }
  .library-page .library-card .book-name { font-size: 11px; line-height: 1.35; }
  .library-page .library-card-author { margin-bottom: 5px; font-size: 9px; }
  .library-page .library-card-tags { min-height: 17px; gap: 3px; margin-bottom: 5px; }
  .library-page .library-card-tags span { min-height: 16px; padding: 0 4px; font-size: 8px; }
  .library-page .library-card-chapter,
  .library-page .library-card-status { font-size: 9px; }
  .library-page .library-new-badge { min-width: 24px; height: 13px; font-size: 7px; }
  .site-footer { padding: 16px 0 10px; }
  .site-footer .footer-grid { grid-template-columns: repeat(4, 1fr) 1.05fr 1.3fr; gap: 14px; }
  .site-footer .footer-title { margin-bottom: 5px; font-size: 10px; }
  .site-footer .footer-links { gap: 2px; font-size: 8px; line-height: 1.45; }
  .site-footer .footer-follow strong { margin-top: 5px; font-size: 9px; line-height: 1.45; }
  .site-footer .footer-symbols { gap: 7px; font-size: 13px; }
  .site-footer .footer-note { grid-column: auto; grid-template-columns: 1fr 40px; gap: 5px; padding: 0; font-size: 8px; }
  .site-footer .footer-note img { width: 40px; height: 40px; }
  .site-footer .footer-note span { padding: 5px 6px; }
  .site-footer .footer-bottom { margin-top: 8px; padding-top: 7px; font-size: 7px; }
}

/* Update C */
.fidelity-update .page-main { padding-top: 18px; background: #fff; }
.update-heading { min-height: 64px; align-items: flex-start; margin-bottom: 14px; }
.update-heading .page-lead { margin-top: 6px; }
.update-date-picker { min-width: 162px; height: 38px; display: inline-flex; align-items: center; justify-content: space-between; gap: 9px; padding: 0 12px; color: var(--color-ink); background: #fff; border: 1px solid var(--color-line); border-radius: 3px; }
.update-date-picker svg { width: 16px; height: 16px; }
.update-date-picker svg:last-child { width: 13px; color: var(--color-ink-soft); }
.week-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0 0 16px; overflow: hidden; background: #fff; border: 1px solid var(--color-line); border-radius: 3px; }
.week-day { min-height: 78px; display: grid; place-content: center; gap: 3px; text-align: center; border-right: 1px solid var(--color-line); }
.week-day:last-child { border-right: 0; }
.week-day small,.week-day span { color: var(--color-ink-soft); font-size: 12px; font-weight: 400; }
.week-day strong { font-size: 16px; font-weight: 600; }
.week-day.is-active { color: var(--color-ink); background: #f3fbf8; box-shadow: inset 0 0 0 1px #62bea9; }
.week-day.is-active small,.week-day.is-active span { color: var(--color-emerald); }
.update-filter-bar { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.update-filter-fields { display: flex; align-items: center; gap: 18px; }
.update-filter-select { width: 196px; height: 36px; display: grid; grid-template-columns: auto minmax(0,1fr) 16px; align-items: center; gap: 8px; padding: 0 10px; background: #fff; border: 1px solid var(--color-line); border-radius: 3px; }
.update-filter-select > span { padding-right: 10px; border-right: 1px solid var(--color-line); }
.update-filter-select select { min-width: 0; color: var(--color-ink-soft); background: transparent; border: 0; outline: 0; appearance: none; }
.update-filter-select svg { width: 14px; color: var(--color-ink-soft); }
.update-favorite-only { display: inline-flex; align-items: center; gap: 7px; color: var(--color-ink-soft); white-space: nowrap; }
.update-favorite-only input { width: 15px; height: 15px; accent-color: var(--color-emerald); }
.update-filter-bar form,.history-toolbar form { display: grid; grid-template-columns: 230px 38px; height: 36px; background: #fff; border: 1px solid var(--color-line); border-radius: 3px; }
.update-filter-bar input,.history-toolbar input { min-width: 0; padding: 0 11px; border: 0; outline: 0; }
.update-filter-bar button,.history-toolbar form button { color: var(--color-emerald); background: transparent; border: 0; }
.update-filter-select,.update-favorite-only,.update-filter-bar input { font-size: 14px; }
.update-summary { margin: 0 0 12px; font-size: 16px; font-weight: 700; }
.update-summary strong { font-weight: 700; }
.update-day-group { overflow: hidden; background: #fff; border: 1px solid var(--color-line); border-radius: 4px; }
.faithful-table { width: 100%; border-collapse: collapse; }
.faithful-table th { padding: 10px 12px; color: var(--color-ink-soft); background: #f4f7f4; font-size: 13px; font-weight: 600; text-align: left; }
.faithful-table td { height: 44px; padding: 5px 12px; border-top: 1px solid #edf0ed; font-size: 14px; font-weight: 400; }
.faithful-table td:nth-child(1),.faithful-table td:nth-child(3),.faithful-table td:nth-child(5),.faithful-table td:nth-child(6),.faithful-table td:nth-child(7) { white-space: nowrap; }
.update-book { display: flex; align-items: center; gap: 8px; min-width: 150px; }
.update-book img { width: 28px; height: 36px; object-fit: cover; border-radius: 2px; }
.update-book strong { font-size: 14px; font-weight: 600; }
.update-time-group th { height: 32px; padding: 0 12px; color: #ff4f35; background: #fff; border-top: 1px solid var(--color-line); font-size: 12px; font-weight: 700; }
.update-time-group:first-child th { border-top: 0; }
.update-table tbody time { color: #ff4f35; font-size: 14px; }
.fidelity-update .status-dot { width: auto; height: auto; display: inline; margin: 0; color: var(--color-ink); background: none; border-radius: 0; font-size: 14px; font-weight: 400; }
.fidelity-update .update-table .text-link { font-size: 14px; font-weight: 500; }
.row-action { display: inline-flex; align-items: center; gap: 2px; color: var(--color-emerald); font-size: 14px; font-weight: 600; white-space: nowrap; }
.update-bottom-tools { min-height: 62px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; }
.update-bottom-tools > p { margin: 0; display: inline-flex; align-items: center; gap: 6px; color: var(--color-ink-soft); font-size: 12px; }
.update-bottom-tools > p svg { width: 14px; color: var(--color-emerald); }
.update-load-more { min-width: 128px; height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: var(--color-emerald); background: #fff; border: 1px solid var(--color-line); border-radius: 3px; }
.update-load-more svg { width: 14px; }
.update-bottom-tools .pager { justify-self: end; margin: 0; }

/* Rank A */
.fidelity-rank .page-main { padding-top: 18px; background: #fff; }
.fidelity-rank .compact-heading { margin-bottom: 18px; }
.rank-toolbar { min-height: 34px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.rank-tabs,.rank-time-tabs,.rank-range-tabs { display: flex; justify-content: flex-start; gap: 0; margin: 0; }
.rank-tabs a,.rank-time-tabs a,.rank-range-tabs a { min-width: 80px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; color: var(--color-ink-soft); background: #f8f9f7; border: 1px solid var(--color-line); border-right: 0; font-size: 14px; font-weight: 400; }
.rank-tabs a { flex: 0 0 80px; }
.rank-tabs a:first-child,.rank-time-tabs a:first-child,.rank-range-tabs a:first-child { border-radius: 3px 0 0 3px; }
.rank-tabs a:last-child,.rank-time-tabs a:last-child,.rank-range-tabs a:last-child { border-right: 1px solid var(--color-line); border-radius: 0 3px 3px 0; }
.rank-tabs .is-active { color: #fff; background: var(--color-emerald); border-color: var(--color-emerald); font-weight: 600; }
.rank-tabs .is-active + a { border-left-color: var(--color-emerald); }
.rank-time-tabs a,.rank-range-tabs a { min-width: 64px; background: #fff; }
.rank-time-tabs .is-active,.rank-range-tabs .is-active { color: var(--color-emerald); background: #f4fbf8; border-color: #9bcfc1; font-weight: 600; }
.rank-hero { padding: 8px 0 4px; background: #f3f8f5; border: 1px solid #ddebe6; border-radius: 4px; }
.faithful-podium { width: min(100%, 1160px); min-height: 380px; margin: 0 auto; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: center; gap: 30px; }
.faithful-podium .podium-card { min-width: 0; position: relative; display: grid; grid-template-columns: 90px minmax(0,1fr); align-items: center; gap: 16px; padding: 0; background: transparent; border: 0; }
.faithful-podium .podium-card:nth-child(1) { order: 2; grid-template-columns: 1fr; justify-items: center; align-self: stretch; text-align: center; }
.faithful-podium .podium-card:nth-child(2) { order: 1; }
.faithful-podium .podium-card:nth-child(3) { order: 3; }
.faithful-podium .podium-number { position: absolute; top: 8px; left: -12px; z-index: 2; width: 32px; height: 32px; display: grid; place-items: center; color: #fff; background: #ff9f0a; border-radius: 4px; font-size: 18px; font-weight: 700; }
.faithful-podium .podium-card:nth-child(1) .podium-number { top: 0; left: calc(50% - 92px); background: #ff6a47; }
.faithful-podium .podium-cover-link { display: block; }
.faithful-podium .podium-cover { width: 90px; aspect-ratio: 3/4; display: block; object-fit: cover; border-radius: 4px; box-shadow: 0 8px 20px rgba(8,43,34,.08); }
.faithful-podium .podium-card:nth-child(1) .podium-cover { width: 148px; }
.podium-copy { min-width: 0; }
.faithful-podium .podium-card:nth-child(1) .podium-copy { width: min(100%,330px); }
.faithful-podium h2 { margin: 10px 0 5px; overflow: hidden; font-size: 18px; font-weight: 600; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.faithful-podium .podium-card:not(:nth-child(1)) h2 { margin-top: 0; font-size: 16px; }
.faithful-podium p { margin: 0; color: var(--color-ink-soft); font-size: 12px; font-weight: 400; line-height: 1.65; }
.podium-tags { display: flex; flex-wrap: wrap; justify-content: inherit; gap: 6px; margin: 8px 0; }
.podium-tags span,.rank-tags span { min-height: 22px; display: inline-flex; align-items: center; padding: 1px 6px; color: var(--color-emerald); background: #f4fbf8; border: 1px solid #bfe0d7; border-radius: 2px; font-size: 12px; }
.podium-latest { margin-top: 9px !important; }
.podium-summary { margin-top: 8px !important; display: -webkit-box; overflow: hidden; line-height: 1.7 !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.faithful-podium strong { margin-top: 10px; display: inline-flex; align-items: center; gap: 5px; color: #ff5b3f; font-size: 14px; font-weight: 500; }
.faithful-podium strong svg { width: 14px; height: 14px; fill: currentColor; }
.rank-main-list { margin: 8px 4px 0; padding: 0; background: #fff; border: 0; }
.rank-list-heading { min-height: 40px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--color-line); }
.rank-list-heading h2,.rank-switch-heading h2 { margin: 0; font-size: 18px; font-weight: 600; }
.rank-range-tabs a { min-width: 68px; min-height: 32px; padding: 0 12px; font-size: 12px; }
.rank-two-column { position: relative; display: grid; grid-template-rows: repeat(14,62px); grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); gap: 0 50px; overflow: hidden; background: #fff; border: 1px solid var(--color-line); border-radius: 4px; }
.rank-two-column::after { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: #edf0ed; content: ""; transform: translateX(-0.5px); }
.preview-rank-reference .rank-two-column { grid-template-rows: repeat(13,62px); }
.rank-two-column .top-row:nth-child(-n+3) { display: none; }
.rank-two-column .top-row { display: grid; grid-template-columns: 12px 32px 130px minmax(122px,1fr) 48px 12px 54px; gap: 10px; min-height: 62px; align-items: center; padding: 0 12px; border-bottom: 1px solid #edf0ed; }
.rank-two-column .top-row img { width: 32px; height: 48px; display: block; object-fit: cover; border-radius: 2px; }
.rank-two-column .number { color: var(--color-ink-soft); font-size: 14px; text-align: center; }
.rank-book-primary,.rank-book-secondary { min-width: 0; display: grid; align-content: center; gap: 5px; }
.rank-book-primary .compact-rank-name { overflow: hidden; color: var(--color-ink); font-size: 14px; font-weight: 600; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.rank-book-secondary .compact-rank-meta { overflow: hidden; color: var(--color-ink-soft); font-size: 12px; font-weight: 400; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.rank-tags { display: flex; gap: 4px; overflow: hidden; }
.rank-tags span { min-height: 18px; padding: 0 4px; font-size: 11px; line-height: 16px; white-space: nowrap; }
.rank-latest { min-width: 0; overflow: hidden; color: var(--color-ink); font-size: 12px; font-weight: 400; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.rank-two-column .metric { color: var(--color-ink-soft); font-size: 12px; font-weight: 400; text-align: right; white-space: nowrap; }
.rank-trend { width: 14px; height: 14px; color: #ff5b3f; }
.rank-two-column .top-row:nth-child(5) .rank-trend,.rank-two-column .top-row:nth-child(7) .rank-trend,.rank-two-column .top-row:nth-child(9) .rank-trend,.rank-two-column .top-row:nth-child(11) .rank-trend,.rank-two-column .top-row:nth-child(13) .rank-trend,.rank-two-column .top-row:nth-child(14) .rank-trend,.rank-two-column .top-row:nth-child(17) .rank-trend,.rank-two-column .top-row:nth-child(20) .rank-trend,.rank-two-column .top-row:nth-child(23) .rank-trend,.rank-two-column .top-row:nth-child(26) .rank-trend,.rank-two-column .top-row:nth-child(29) .rank-trend { color: #0ba67b; transform: rotate(180deg); }
.rank-follow { min-height: 28px; display: grid; place-items: center; margin-left: 8px; color: var(--color-emerald); border: 1px solid #9dc9bc; border-radius: 2px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.rank-switch-heading { min-height: 62px; display: flex; align-items: end; justify-content: space-between; padding: 20px 0 10px; }
.rank-switch-heading a { display: inline-flex; align-items: center; gap: 3px; color: var(--color-ink-soft); font-size: 12px; }
.rank-switch-heading svg { width: 14px; height: 14px; }
.rank-switch-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 0 0 22px; }
.rank-switch-grid a { min-height: 82px; display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: #fff; border: 1px solid var(--color-line); border-radius: 3px; }
.rank-switch-icon { width: 48px; height: 48px; flex: 0 0 auto; display: grid !important; place-items: center; border-radius: 50%; }
.rank-switch-icon [data-lucide] { width: 25px; height: 25px; color: var(--color-ink); }
.rank-switch-icon-pink { background: #fff0f3; }
.rank-switch-icon-gray { background: #eff1ef; }
.rank-switch-icon-yellow { background: #fff8d7; }
.rank-switch-icon-green { background: #e8f5df; }
.rank-switch-grid span,.rank-switch-grid small { display: block; }
.rank-switch-grid strong { font-size: 14px; font-weight: 600; }
.rank-switch-grid small { margin-top: 3px; color: var(--color-ink-soft); font-size: 12px; font-weight: 400; }

@media (max-width: 1180px) {
  .faithful-podium { gap: 20px; }
}

@media (max-width: 1050px) {
  .rank-two-column { display: block; }
  .rank-two-column::after { display: none; }
  .rank-two-column .top-row { grid-template-columns: 18px 32px minmax(150px,1fr) minmax(150px,.9fr) 50px 14px 56px; gap: 10px; }
}

/* Detail A */
.fidelity-detail .container { max-width: 1040px; }
.detail-overview-layout { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 260px; grid-template-rows: auto auto; align-items: start; column-gap: 36px; }
.faithful-detail-hero { grid-column: 1; grid-row: 1; grid-template-columns: 254px minmax(0,1fr); align-items: start; gap: 42px; padding: 0; background: transparent; border: 0; }
.fidelity-detail .detail-cover { width: 254px; aspect-ratio: 2/3; border-radius: 3px; box-shadow: 0 10px 28px rgba(8,43,34,.11); }
.fidelity-detail .detail-cover img { width: 100%; height: 100%; display: block; object-fit: cover; }
.fidelity-detail .detail-main { min-width: 0; padding: 10px 0 0; }
.fidelity-detail .detail-main h1 { margin: 0 0 20px; font-size: 30px; line-height: 1.2; }
.detail-author { display: flex; align-items: center; gap: 6px; margin: 0 0 17px; color: var(--color-ink-soft); }
.detail-author-more { width: 14px; height: 14px; }
.fidelity-detail .tag-list { margin-bottom: 26px; }
.detail-stats { display: flex; flex-wrap: wrap; gap: 0; margin: 12px 0; color: var(--color-ink-soft); }
.detail-stats span { padding: 0 14px; border-right: 1px solid var(--color-line); }
.detail-stats span:first-child { padding-left: 0; }
.detail-stats span:last-child { border-right: 0; }
.detail-stats strong { color: var(--color-ink); }
.detail-summary { width: 100%; max-width: 470px; height: 132px; min-height: 132px; max-height: 132px; margin: 20px 0 18px; overflow: hidden; line-height: 1.85; }
.detail-summary > span { display: block; }
.fidelity-detail .detail-actions { margin-top: 28px; }
.fidelity-detail .detail-actions .button,.fidelity-detail .detail-actions .button-secondary { white-space: nowrap; }
.fidelity-detail .detail-actions > * { width: 156px; min-height: 46px; justify-content: center; padding-inline: 16px; font-size: 15px; }
.faithful-detail-aside { position: absolute; top: 0; right: 0; width: 260px; min-height: 448px; padding: 18px; background: #fff; border: 1px solid var(--color-line); border-radius: 3px; }
.faithful-detail-aside h2 { margin: 0 0 10px; font-size: 16px; }
.latest-chapter-card { display: grid; gap: 6px; padding: 12px; background: #f7faf7; border: 1px solid var(--color-line); }
.latest-chapter-card em { margin-left: 4px; color: var(--color-coral); font-size: 9px; font-style: normal; }
.latest-chapter-card span { color: var(--color-ink-soft); font-size: 11px; }
.aside-rule { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-line); }
.aside-rule p { margin: 5px 0; color: var(--color-ink-soft); }
.aside-rule .favorite-state { display: flex; align-items: center; gap: 5px; color: var(--color-ink-soft); }
.aside-rule .favorite-state [data-lucide] { width: 15px; height: 15px; color: var(--color-emerald); }
.aside-rule dl { margin: 0; }
.aside-rule dl div { display: flex; justify-content: space-between; padding: 4px 0; }
.aside-rule dt { display: inline-flex; align-items: center; gap: 7px; color: var(--color-ink-soft); }
.aside-rule dt [data-lucide] { width: 14px; height: 14px; }
.detail-overview-layout > .detail-clues { grid-column: 1; grid-row: 2; margin-top: 28px; }
.detail-clues { min-height: 142px; display: block; padding: 14px 18px; background: #fff; border: 1px solid var(--color-line); }
.detail-clues > h2 { margin: 0 0 8px; font-size: 17px; }
.detail-clue-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.detail-clue-grid > div { min-height: 76px; display: flex; align-items: center; gap: 12px; padding: 6px 22px; border-left: 1px solid var(--color-line); }
.detail-clue-grid > div:first-child { padding-left: 0; border-left: 0; }
.detail-clue-grid [data-lucide] { width: 34px; height: 34px; color: var(--color-emerald); }
.detail-clue-grid span,.detail-clue-grid small { display: block; }
.detail-clue-grid small { margin-top: 3px; color: var(--color-ink-soft); font-size: 11px; line-height: 1.5; }
.detail-latest-strip { min-height: 54px; display: grid; grid-template-columns: 150px 210px minmax(0,1fr) auto; align-items: center; gap: 18px; margin-top: 16px; padding: 0 18px; background: #fff; border: 1px solid var(--color-line); }
.detail-latest-strip em { margin-left: 6px; color: var(--color-coral); font-size: 10px; font-style: normal; }
.detail-latest-summary { overflow: hidden; color: var(--color-ink-soft); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.detail-latest-strip small { display: inline-flex; align-items: center; color: var(--color-emerald); font-weight: 700; }
.detail-chapters { margin-top: 16px; padding: 18px; background: #fff; border: 1px solid var(--color-line); }
.chapter-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.chapter-heading h2 { margin: 0; font-size: 20px; }
.chapter-heading h2 span { color: var(--color-ink-soft); font-size: 13px; font-weight: 400; }
.chapter-heading > div { display: flex; gap: 6px; }
.chapter-heading button { min-height: 34px; padding: 0 12px; background: #fff; border: 1px solid var(--color-line); }
.chapter-heading button.is-active { color: #fff; background: var(--color-emerald); }
.chapter-heading label { display: grid; grid-template-columns: 180px 34px; height: 34px; border: 1px solid var(--color-line); }
.chapter-heading input { min-width: 0; padding: 0 10px; border: 0; }
.chapter-heading label [data-lucide] { align-self: center; justify-self: center; }
.detail-chapter-table { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 1px solid var(--color-line); border-left: 1px solid var(--color-line); }
.detail-chapter-table a { min-height: 43px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-right: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.detail-chapter-table span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-chapter-table em { color: var(--color-ink-soft); font-size: 10px; font-style: normal; }
.chapter-more { display: flex; align-items: center; gap: 6px; margin: 14px auto 0; padding: 7px 18px; color: var(--color-emerald); background: #fff; border: 1px solid #9dc9bc; }
.detail-copy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.detail-copy-grid article { padding: 18px; background: #fff; border: 1px solid var(--color-line); }
.detail-copy-grid p { color: #44514d; line-height: 1.9; }
.detail-copy-grid ul { margin: 0; padding: 0; list-style: none; }
.detail-copy-grid li { display: flex; align-items: flex-start; gap: 9px; padding: 9px 0; border-bottom: 1px solid #edf0ed; }
.detail-copy-grid li [data-lucide] { margin-top: 3px; color: var(--color-emerald); }
.detail-copy-grid li span,.detail-copy-grid li strong { display: block; }
.detail-related-grid { grid-template-columns: repeat(10,minmax(0,1fr)); gap: 13px; }
.fidelity-detail .detail-related { padding: 0; background: transparent; border: 0; }
.fidelity-detail .detail-related .book-cover { aspect-ratio: 2/3; }
.fidelity-detail .detail-related .book-update { margin-top: 2px; color: var(--color-ink-soft); font-size: 11px; }

@media (max-width: 980px) {
  .header-main { grid-template-columns: 190px 1fr auto; gap: 14px; }
  .home-hero { grid-template-columns: 1fr; }
  .hero-ranking { display: none; }
  .home-book-grid { grid-template-columns: repeat(4,1fr); }
  .scene-grid { grid-template-columns: repeat(4,1fr); }
  .library-book-grid { grid-template-columns: repeat(4,1fr); }
  .detail-related-grid { grid-template-columns: repeat(5,1fr); }
  .detail-chapter-table { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 1000px) {
  .fidelity-detail .container { width: calc(100% - 64px); }
  .fidelity-detail .detail-overview-layout { grid-template-columns: minmax(0,1fr) 210px; column-gap: 26px; }
  .fidelity-detail .faithful-detail-hero { grid-template-columns: 205px minmax(0,1fr); gap: 26px; }
  .fidelity-detail .detail-cover { width: 205px; }
  .fidelity-detail .detail-main { padding-top: 5px; }
  .fidelity-detail .detail-main h1 { font-size: 24px; }
  .fidelity-detail .detail-main h1 { margin-bottom: 8px; }
  .fidelity-detail .detail-author { margin-bottom: 10px; }
  .fidelity-detail .tag-list { margin-bottom: 12px; }
  .fidelity-detail .detail-author,.fidelity-detail .detail-stats,.fidelity-detail .detail-summary { font-size: 11px; }
  .fidelity-detail .detail-summary { height: auto; min-height: 0; max-height: 7.6em; margin: 10px 0 12px; line-height: 1.75; }
  .fidelity-detail .detail-actions { margin-top: 12px; }
  .fidelity-detail .detail-actions .button,.fidelity-detail .detail-actions .button-secondary { min-height: 36px; padding-inline: 18px; }
  .fidelity-detail .detail-actions > * { width: auto; font-size: 14px; }
  .fidelity-detail .faithful-detail-aside { width: 210px; min-height: 364px; padding: 14px; }
  .fidelity-detail .faithful-detail-aside h2 { font-size: 13px; }
  .fidelity-detail .latest-chapter-card { padding: 10px; font-size: 11px; }
  .fidelity-detail .aside-rule { margin-top: 12px; padding: 11px 0 0; border-top: 1px solid var(--color-line); border-left: 0; font-size: 10px; }
  .fidelity-detail .detail-overview-layout > .detail-clues { margin-top: 16px; }
  .fidelity-detail .detail-clues { min-height: 79px; padding: 10px 14px; }
  .fidelity-detail .detail-clues > h2 { font-size: 14px; }
  .fidelity-detail .detail-clue-grid > div { min-height: 58px; gap: 8px; padding: 4px 14px; }
  .fidelity-detail .detail-clue-grid [data-lucide] { width: 27px; height: 27px; }
  .fidelity-detail .detail-clue-grid strong { font-size: 11px; }
  .fidelity-detail .detail-clue-grid small { font-size: 8px; }
  .fidelity-detail .detail-latest-strip { grid-template-columns: 120px 170px minmax(0,1fr) auto; min-height: 44px; padding-inline: 14px; font-size: 11px; }
  .fidelity-detail .detail-chapters { padding: 14px; }
  .fidelity-detail .chapter-heading h2 { font-size: 16px; }
  .fidelity-detail .detail-chapter-table { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .fidelity-detail .detail-chapter-table a { min-height: 35px; padding: 6px 9px; font-size: 10px; }
  .fidelity-detail .detail-copy-grid article { padding: 14px; font-size: 10px; }
  .fidelity-detail .detail-copy-grid p { line-height: 1.75; }
  .fidelity-detail .detail-copy-grid li { padding: 6px 0; }
  .fidelity-detail .detail-related-grid { grid-template-columns: repeat(10,minmax(0,1fr)); gap: 9px; }
  .fidelity-detail .detail-related .book-name { font-size: 10px; }
  .fidelity-detail .detail-related .book-meta,.fidelity-detail .detail-related .book-update { font-size: 8px; }
}

@media (max-width: 720px) {
  .fidelity-detail .container { width: calc(100% - 32px); }
  .fidelity-detail .detail-overview-layout { grid-template-columns: 1fr; }
  .fidelity-detail .faithful-detail-hero { grid-column: 1; grid-template-columns: 130px minmax(0,1fr); gap: 18px; }
  .fidelity-detail .detail-cover { width: 130px; }
  .fidelity-detail .faithful-detail-aside { position: static; grid-column: 1; grid-row: auto; width: auto; min-height: 0; }
  .fidelity-detail .detail-overview-layout > .detail-clues { grid-column: 1; grid-row: auto; margin-top: 0; }
}

/* Bookshelf B */
.fidelity-bookshelf .page-heading,.fidelity-history .page-heading { padding-bottom: 12px; border-bottom: 1px solid var(--color-line); }
.bookshelf-continue,.bookshelf-updates,.bookshelf-all,.history-feature,.history-section,.history-recent-books { margin-top: 14px; padding: 18px; background: #fff; border: 1px solid var(--color-line); }
.bookshelf-continue { background: #f3f8f3; }
.continue-shelf-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 28px; padding: 0 26px 4px; }
.continue-shelf-grid article { min-width: 0; display: flex; flex-direction: column; align-items: stretch; padding: 0; background: transparent; }
.continue-cover { display: block; width: 100%; }
.continue-shelf-grid article img { width: 100%; aspect-ratio: 3/4; display: block; object-fit: cover; border-radius: 3px; }
.continue-shelf-grid h2 { margin: 10px 0 5px; overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.continue-shelf-grid p { margin: 0 0 4px; overflow: hidden; color: var(--color-ink-soft); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.progress { width: 100%; height: 4px; display: block; overflow: hidden; background: #dce7e1; }
.progress i { height: 100%; display: block; background: var(--color-emerald); }
.continue-meta { display: flex; justify-content: space-between; gap: 8px; margin: 6px 0 10px; }
.continue-shelf-grid small { min-width: 0; overflow: hidden; color: var(--color-ink-soft); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.continue-meta strong { color: var(--color-ink-soft); font-size: 10px; font-weight: 500; }
.continue-shelf-grid .button { width: 100%; margin-top: auto; }
.update-count { min-width: 20px; height: 20px; display: inline-grid; place-items: center; margin-left: 5px; color: #fff; background: var(--color-coral); border-radius: 50%; font-size: 10px; }
.bookshelf-update-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 24px; }
.bookshelf-update-grid article { min-height: 74px; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 11px; border-bottom: 1px solid #edf0ed; }
.bookshelf-update-grid img { width: 42px; height: 56px; object-fit: cover; }
.bookshelf-update-grid h3 { margin: 0; font-size: 14px; }
.bookshelf-update-grid p { margin: 3px 0; color: var(--color-emerald); font-size: 12px; }
.bookshelf-update-grid em { color: var(--color-coral); font-size: 9px; font-style: normal; }
.bookshelf-update-grid small { color: var(--color-ink-soft); }
.bookshelf-toolbar { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--color-line); }
.bookshelf-toolbar > div { display: flex; align-items: center; gap: 7px; }
.bookshelf-search { width: 220px; height: 34px; display: grid; grid-template-columns: 1fr 34px; border: 1px solid var(--color-line); }
.bookshelf-search input { min-width: 0; padding: 0 10px; border: 0; outline: 0; }
.bookshelf-search [data-lucide] { align-self: center; justify-self: center; color: var(--color-ink-soft); }
.bookshelf-toolbar select,.icon-button { height: 34px; padding: 0 10px; background: #fff; border: 1px solid var(--color-line); }
.sort-tabs button { display: inline-flex; align-items: center; gap: 4px; }
.bookshelf-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px 30px; }
.bookshelf-grid .book-card { position: relative; }
.book-remove { position: absolute; top: 5px; right: 5px; width: 28px; height: 28px; display: grid; place-items: center; color: #fff; background: rgba(20,28,25,.72); border: 0; border-radius: 50%; }
.bookshelf-load-more { min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; color: var(--color-emerald); border-top: 1px solid var(--color-line); }

/* History C */
.history-page-actions { display: flex; gap: 8px; }
.history-page-actions button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; color: var(--color-emerald); background: #fff; border: 1px solid var(--color-line); }
.history-toolbar { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 14px; border-bottom: 1px solid var(--color-line); }
.history-tabs { display: flex; gap: 5px; }
.history-tabs a { min-width: 82px; padding: 9px 12px; text-align: center; }
.history-tabs .is-active { color: var(--color-emerald); border-bottom: 2px solid var(--color-emerald); }
.history-controls { display: flex; align-items: start; gap: 7px; }
.history-controls select,.history-controls > button { height: 36px; padding: 0 11px; background: #fff; border: 1px solid var(--color-line); }
.history-controls > button { display: inline-flex; align-items: center; gap: 5px; }
.history-date-label { margin-bottom: 10px; color: var(--color-emerald); font-weight: 800; }
.history-feature article { display: grid; grid-template-columns: 92px minmax(0,1fr) 120px 130px auto; align-items: center; gap: 22px; padding: 14px; background: #eef7f2; }
.history-feature article img { width: 92px; aspect-ratio: 3/4; object-fit: cover; }
.history-feature h2 { margin: 3px 0; font-size: 18px; }
.history-feature p { margin: 0 0 9px; color: var(--color-ink-soft); }
.history-feature .progress { max-width: 380px; }
.history-feature-progress { display: grid; justify-items: center; gap: 3px; }
.history-feature-progress strong { color: var(--color-emerald); font-size: 22px; }
.history-feature-progress > span:not(.progress) { color: var(--color-ink-soft); font-size: 10px; }
.history-feature-progress .progress { width: 90px; }
.history-feature article > small { color: var(--color-ink-soft); }
.history-kicker { color: var(--color-emerald); font-size: 11px; font-weight: 700; }
.history-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 28px; }
.history-grid article { position: relative; min-height: 180px; display: grid; grid-template-columns: 18px 82px minmax(0,1fr) auto; align-items: center; gap: 12px; border-bottom: 1px solid #edf0ed; }
.history-grid article > label { align-self: start; margin-top: 18px; }
.history-grid article > img { width: 62px; height: 82px; object-fit: cover; }
.history-grid article > img { width: 82px; height: 110px; }
.history-grid h2 { margin: 0 0 4px; font-size: 15px; }
.history-grid h2 em { margin-left: 5px; padding: 1px 5px; color: var(--color-emerald); border: 1px solid #b8d5cc; font-size: 9px; font-style: normal; font-weight: 500; }
.history-grid p { margin: 0 0 7px; color: var(--color-ink-soft); font-size: 12px; }
.history-grid small { color: var(--color-ink-soft); font-size: 10px; }
.history-grid dl { margin: 0 0 8px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 3px 14px; }
.history-grid dl div { display: flex; gap: 5px; font-size: 10px; }
.history-grid dt { color: var(--color-ink-soft); }
.history-grid dd { margin: 0; }
.history-grid .book-remove { top: 8px; right: 0; width: 24px; height: 24px; color: var(--color-ink-soft); background: transparent; }
.history-row-actions { display: grid; justify-items: end; gap: 12px; margin-right: 26px; }
.history-row-actions button { display: inline-flex; align-items: center; gap: 4px; color: var(--color-emerald); background: transparent; border: 0; font-size: 11px; }
.history-recent-books .book-grid { grid-template-columns: repeat(6,minmax(0,1fr)); }

/* Login/registration B */
.auth-wrap { width: min(calc(100% - 48px), 1160px); margin: 20px auto 48px; }
.auth-wrap > .breadcrumb { max-width: 680px; margin-inline: auto; }
.auth-page-heading { max-width: 680px; margin: 0 auto 14px; text-align: center; }
.auth-page-heading h1 { font-size: 25px; }
.auth-page-heading p { font-size: 13px; }
.auth-panel { width: min(100%,680px); border-radius: 4px; box-shadow: none; }
.auth-form { padding: 0 34px 24px; }
.auth-tabs { margin: 0 -34px 20px; }
.auth-tab { padding: 15px 12px 12px; }
.auth-form .form-grid { max-width: 500px; margin: 0 auto; gap: 13px; }
.auth-form .field input { min-height: 42px; }
.auth-benefits { max-width: 520px; margin: 20px auto 0; padding-top: 18px; }

/* Personal center A */
.fidelity-account .account-layout { grid-template-columns: 220px minmax(0,1fr); gap: 18px; }
.fidelity-account .account-sidebar,.faithful-account-panel { border-radius: 3px; }
.fidelity-account .account-sidebar { min-height: 980px; display: flex; flex-direction: column; padding: 14px; }
.fidelity-account .account-user { padding: 6px 4px 15px; }
.fidelity-account .account-avatar { width: 66px; height: 66px; }
.account-level { display: inline-block; margin-left: 5px; padding: 1px 5px; color: var(--color-emerald); background: var(--color-emerald-soft); font-size: 10px; }
.account-user small { display: block; margin-top: 3px; color: var(--color-ink-soft); font-size: 10px; }
.fidelity-account .account-menu { flex: 1; }
.account-menu a { padding: 8px 10px; }
.account-menu a.is-active { color: var(--color-emerald); background: var(--color-emerald-soft); }
.account-menu-separator { height: 1px; display: block; margin: 9px 8px; background: var(--color-line); }
.fidelity-account .account-menu .button-quiet { margin-top: auto; border-color: var(--color-emerald); }
.faithful-account-panel { padding: 18px; }
.account-page-title { margin: 2px 0 14px; font-size: 25px; }
.account-security-status { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding: 18px 0; background: #fff; border: 1px solid var(--color-line); }
.account-security-status > div { min-height: 82px; display: grid; align-content: center; gap: 5px; padding: 0 30px; border-right: 1px solid var(--color-line); }
.account-security-status > div:last-child { border-right: 0; }
.account-security-status span,.account-security-status small { color: var(--color-ink-soft); font-size: 11px; }
.account-security-status strong { color: var(--color-emerald); font-size: 19px; font-weight: 500; }
.account-security-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 16px; }
.password-security-card,.security-check-card,.device-table,.reading-preference-card,.danger-zone { padding: 16px; background: #fff; border: 1px solid var(--color-line); }
.password-security-card .form-grid { max-width: 560px; margin-left: 120px; gap: 12px; }
.password-security-card .field small { color: var(--color-ink-soft); }
.password-security-card .button { width: 160px; }
.security-tip { margin: 2px 0 0; display: flex; align-items: center; gap: 5px; color: var(--color-ink-soft); font-size: 11px; }
.security-check-card h2 { margin: 0 0 8px; font-size: 17px; }
.security-check-card ul { margin: 0; padding: 0; list-style: none; }
.security-check-card li { display: flex; gap: 9px; padding: 10px 0; border-bottom: 1px solid #edf0ed; }
.security-check-card li [data-lucide] { margin-top: 2px; color: var(--color-emerald); }
.security-check-card span,.security-check-card strong,.security-check-card small { display: block; }
.security-check-card small { color: var(--color-ink-soft); }
.device-table { margin-top: 14px; }
.device-table table { width: 100%; border-collapse: collapse; }
.device-table th,.device-table td { padding: 9px 10px; text-align: left; border-bottom: 1px solid #edf0ed; }
.device-table th { color: var(--color-ink-soft); background: #f6f8f6; font-size: 11px; }
.device-table td:first-child { display: flex; align-items: center; gap: 8px; }
.device-table button { color: var(--color-emerald); background: #fff; border: 1px solid #a9cfc3; }
.reading-preference-card { display: grid; grid-template-columns: 1fr 160px 160px auto; align-items: end; gap: 12px; margin-top: 14px; }
.reading-preference-card h2 { margin: 0; font-size: 17px; }
.reading-preference-card p { margin: 3px 0 0; color: var(--color-ink-soft); }
.reading-preference-card label { display: grid; gap: 4px; }
.reading-preference-card select { min-height: 38px; border: 1px solid var(--color-line); }
.danger-zone { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; border-color: #f0c9c5; }
.danger-zone h2 { margin: 0; color: var(--color-danger); font-size: 16px; }
.danger-zone p { margin: 2px 0 0; color: var(--color-ink-soft); }
.danger-zone button { min-height: 36px; padding: 0 15px; color: var(--color-danger); background: #fff; border: 1px solid var(--color-danger); }

/* Reader C: narrow warm reading column, then compact continuation content. */
.reader-page { background: #f6f2e9; }
.reader-page .reader-header { border-bottom-width: 1px; box-shadow: none; }
.reader-page .reader-header-inner { min-height: 58px; grid-template-columns: minmax(300px,1fr) auto minmax(300px,1fr); }
.reader-header-start { display: flex; align-items: center; gap: 24px; }
.reader-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--color-emerald); }
.reader-brand img { width: 32px; height: 32px; object-fit: contain; }
.reader-brand strong { font-size: 15px; }
.reader-page .reader-book-link { color: var(--color-ink-soft); font-size: 12px; font-weight: 500; }
.reader-page .reader-header-title { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; }
.reader-page .reader-header-title span { color: var(--color-ink-soft); }
.reader-page .reader-header-actions { gap: 2px; }
.reader-page .reader-icon-button { min-width: 0; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; background: transparent; border-color: transparent; border-radius: 2px; font-size: 12px; }
.reader-page .reader-icon-button:hover { background: #f1f5f1; border-color: var(--color-line); }
.reader-page .reader-main { width: min(calc(100% - 48px), 820px); margin-top: 18px; }
.reader-page .reader-article { padding: 36px 72px 22px; background: transparent; border: 0; }
.reader-page .reader-title { font-size: 27px; }
.reader-page .reader-byline { margin: 7px 0 28px; }
.reader-page .reader-content { font-size: 18px; font-weight: 400; line-height: 2.05; }
.reader-page .reader-content p { font-weight: 400; }
.reader-page .reader-content blockquote { margin: 22px 0; padding: 12px 16px; color: #4b504a; background: #f1efe3; border-left: 3px solid var(--color-pistachio); }
.reader-page .reader-end { margin-top: 36px; }
.reader-page .reader-nav { grid-template-columns: 1fr 1fr 1fr; margin-top: 12px; }
.reader-page .reader-nav .reader-next { grid-column: 2; grid-row: 1; color: #fff; background: var(--color-emerald); border-color: var(--color-emerald); }
.reader-page .reader-nav button { grid-column: 3; grid-row: 1; }
.reader-secondary-actions { min-height: 50px; display: grid; grid-template-columns: repeat(3,1fr); align-items: center; margin-top: 10px; background: #fffdf8; border-bottom: 1px solid #ded9ce; }
.reader-secondary-actions a,.reader-secondary-actions button { min-height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: var(--color-ink-soft); background: transparent; border: 0; border-right: 1px solid #e4dfd3; }
.reader-secondary-actions > :last-child { border-right: 0; }
.reader-preview { display: grid; gap: 5px; padding: 18px 0; border-bottom: 1px solid #ddd8cd; }
.reader-preview strong { font-size: 14px; }
.reader-preview a { color: var(--color-ink); font-size: 13px; font-weight: 700; }
.reader-preview p { margin: 0; color: var(--color-ink-soft); font-size: 12px; }
.reader-page .section,.reader-page .reader-recent { padding: 16px 0; background: transparent; border: 0; border-radius: 0; }
.reader-page .book-grid { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 12px; }
.reader-floating-menu { position: fixed; right: 28px; top: 52%; z-index: 26; width: 48px; height: 48px; display: grid; place-items: center; color: var(--color-emerald); background: #fff; border: 1px solid var(--color-line); border-radius: 50%; box-shadow: var(--shadow-low); }
.reader-scroll-status { position: fixed; right: 28px; bottom: 72px; z-index: 25; display: grid; justify-items: center; gap: 4px; color: var(--color-ink-soft); font-size: 11px; }
.reader-scroll-status a { width: 42px; height: 42px; display: grid; place-items: center; color: var(--color-emerald); background: #fff; border: 1px solid var(--color-line); border-radius: 50%; box-shadow: var(--shadow-low); }
.reader-scroll-status output { font-size: 10px; }
.reader-footer-wrap .site-footer { margin-top: 42px; }

@media (max-width: 820px) {
  .continue-shelf-grid,.bookshelf-update-grid,.history-grid,.account-security-grid { grid-template-columns: 1fr; }
  .bookshelf-grid,.history-recent-books .book-grid { grid-template-columns: repeat(3,1fr); }
  .fidelity-account .account-layout { grid-template-columns: 1fr; }
  .fidelity-account .account-sidebar { display: none; }
  .reading-preference-card { grid-template-columns: 1fr 1fr; }
}

/* Confirmed account pages: compact desktop layouts. */
.fidelity-auth .auth-wrap { width: min(calc(100% - 48px),1160px); min-height: 560px; margin: 20px auto 34px; }
.fidelity-auth .auth-wrap > .breadcrumb,
.fidelity-auth .auth-page-heading { max-width: none; margin-inline: 0; text-align: left; }
.fidelity-auth .auth-page-heading { margin-bottom: 12px; }
.fidelity-auth .auth-page-heading h1 { font-size: 25px; }
.fidelity-auth .auth-panel { width: min(100%,516px); }
.fidelity-auth .auth-form { padding: 0 28px 22px; }
.fidelity-auth .auth-tabs { margin: 0 -28px 18px; }
.fidelity-auth .auth-tab { padding: 14px 12px 11px; font-weight: 600; }
.fidelity-auth .auth-tab[aria-current="page"]::after { height: 2px; background: var(--color-emerald); }
.fidelity-auth .auth-form .form-grid { max-width: none; gap: 12px; }
.fidelity-auth .auth-option-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 13px; }
.fidelity-auth .auth-form-links { justify-content: center; }
.fidelity-auth .auth-benefits { margin-top: 18px; padding-top: 18px; }

.fidelity-bookshelf .page-main,
.fidelity-history .page-main,
.fidelity-account .page-main { padding-bottom: 34px; }
.fidelity-bookshelf .bookshelf-continue { padding: 16px 18px 14px; background: #f4f8f4; }
.fidelity-bookshelf .continue-shelf-grid { gap: 34px; padding: 0 28px 2px; }
.fidelity-bookshelf .continue-shelf-grid article { width: min(100%,180px); justify-self: center; display: flex; flex-direction: column; align-items: stretch; }
.fidelity-bookshelf .continue-cover { width: 132px; align-self: center; }
.fidelity-bookshelf .continue-shelf-grid article img { aspect-ratio: 3/4; }
.fidelity-bookshelf .continue-shelf-grid h2 { margin: 9px 0 4px; }
.fidelity-bookshelf .continue-shelf-grid .button { width: 112px; min-height: 32px; align-self: center; }
.fidelity-bookshelf .bookshelf-all { padding-bottom: 12px; }
.bookshelf-compact-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 22px 26px; }
.bookshelf-compact-card { min-width: 0; display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 11px; align-items: start; }
.bookshelf-compact-card .book-cover { width: 72px; }
.bookshelf-compact-card .book-cover img { width: 100%; aspect-ratio: 3/4; display: block; object-fit: cover; }
.bookshelf-compact-card .book-name { margin: 0 0 5px; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.bookshelf-compact-card .book-meta,
.bookshelf-compact-card .book-update { display: block; margin: 0 0 7px; color: var(--color-ink-soft); font-size: 10px; }
.bookshelf-compact-card .book-update { color: var(--color-ink); }
.bookshelf-compact-card .continue-meta { margin: 5px 0 0; }
.bookshelf-view-all { min-height: 38px; display: flex; align-items: center; justify-content: center; margin-top: 18px; color: var(--color-emerald); border: 1px solid #b9d2c9; font-weight: 700; }
.fidelity-bookshelf .bookshelf-load-more { margin-top: 0; border-top: 0; }

.fidelity-history .history-feature,
.fidelity-history .history-section { padding: 16px 18px; }
.fidelity-history .history-grid article { min-height: 158px; grid-template-columns: 18px 70px minmax(0,1fr) auto; gap: 11px; }
.fidelity-history .history-grid article > img { width: 70px; height: 94px; }
.fidelity-history .history-row-actions { margin-right: 0; }
.history-private-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; color: var(--color-ink-soft); font-size: 11px; }

.fidelity-account .device-table td { white-space: nowrap; }
.fidelity-account .device-table td:first-child { min-width: 190px; }
.fidelity-account .account-user { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; align-items: center; gap: 3px 8px; text-align: left; }
.fidelity-account .account-avatar { grid-column: 1; grid-row: 1 / span 3; width: 56px; height: 56px; }
.fidelity-account .account-user > strong { grid-column: 2; grid-row: 1; }
.fidelity-account .account-level { grid-column: 3; grid-row: 1; margin-left: 0; }
.fidelity-account .account-user .book-meta,
.fidelity-account .account-user small { grid-column: 2 / span 2; }
.fidelity-account .reading-preference-card { display: block; }
.preference-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.preference-title h2 { margin: 0; font-size: 17px; }
.preference-preview { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: center; }
.preference-preview > div { min-height: 48px; display: grid; grid-template-columns: 34px auto 1fr; align-items: center; gap: 10px; padding: 0 22px; border-right: 1px solid var(--color-line); }
.preference-preview > div:last-child { border-right: 0; }
.preference-preview > div > strong { font-family: Georgia,serif; font-size: 20px; font-weight: 500; }
.preference-preview > div > span { color: var(--color-ink-soft); }
.preference-preview > div > b { justify-self: start; font-weight: 500; }
.preference-swatch { width: 22px; height: 22px; display: block; background: #e6f1df; border: 1px solid #cfdec8; border-radius: 50%; }

/* Reader settings use variables so the selected values also theme the lower modules. */
.reader-page { background: var(--reader-page-bg,#f6f2e9); color: var(--reader-text,#27231f); }
.reader-page .reader-header { color: var(--reader-text,#27231f); background: var(--reader-header-bg,rgba(255,253,248,.96)); }
.reader-page .reader-article { color: var(--reader-text,#27231f); }
.reader-page .reader-content { font-family: var(--reader-font,var(--font-reading)); font-size: var(--reader-font-size,18px); line-height: var(--reader-line-height,2.05); letter-spacing: var(--reader-letter-spacing,0); }
.reader-page .reader-content blockquote { color: var(--reader-muted,#4b504a); background: var(--reader-quote-bg,#f1efe3); }
.reader-page .reader-secondary-actions,
.reader-page .reader-nav a,
.reader-page .reader-nav button { color: var(--reader-text,#27231f); background: var(--reader-surface,#fffdf8); }
.reader-page .reader-drawer,
.reader-page .reader-settings-panel { color: var(--reader-text,#27231f); background: var(--reader-surface,#fffdf8); }
.reader-page[data-reader-mode="night"] .reader-icon-button:hover { background: #28302d; }

@media (max-width: 1050px) {
  .bookshelf-compact-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .fidelity-bookshelf .continue-cover { width: 112px; }
}

@media (max-width: 820px) {
  .bookshelf-compact-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .fidelity-bookshelf .continue-shelf-grid { grid-template-columns: repeat(2,minmax(0,1fr)); padding-inline: 0; }
  .fidelity-auth .auth-wrap { width: calc(100% - 32px); }
  .preference-preview { grid-template-columns: 1fr; }
  .preference-preview > div { border-right: 0; border-bottom: 1px solid var(--color-line); }
}