/* Catalog and book pages share a quiet, mint-accented reading surface. */
.site-dark main.story-page { width: min(1100px, 92%); max-width: 1100px; padding-inline: 0; }
.story-page .main-wrapper { display: grid; gap: 28px; align-items: start; }
.story-page .listCol, .story-page .detailCol { min-width: 0; }
.story-breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; color: #8b9fab; font-size: 11px; }
.story-breadcrumbs a { padding: 0; color: #9db9b0; }
.story-breadcrumbs > span[aria-hidden] { color: #3d5358; }
.story-breadcrumbs > span:last-child { overflow-wrap: anywhere; }
.story-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 9px; font-weight: 700; letter-spacing: 1.8px; color: #85b6a3; }
.catalog-heading { margin-bottom: 24px; }
.catalog-heading h1 { margin: 12px 0; font-size: clamp(26px, 3vw, 34px); line-height: 1.25; font-weight: 800; letter-spacing: -1px; }
.catalog-heading > p { max-width: 650px; color: #92a7b4; font-size: 13px; line-height: 1.8; margin: 0; }
.catalog-summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 0 0 16px; margin-bottom: 20px; border-bottom: 1px solid #25343c; font-size: 11px; color: #8da3af; }
.catalog-summary > span { display: inline-flex; align-items: center; gap: 7px; }
.catalog-summary i { margin-right: 2px; color: #8bc9af; }
.catalog-summary strong, .catalog-summary b { color: #d9e9e3; font-weight: 600; }
.catalog-page .book-list { display: flex; flex-direction: column; gap: 14px; }
.site-dark .catalog-page .story-card { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 20px; padding: 18px; border: 1px solid #293841; border-radius: 16px; background: linear-gradient(115deg, #15212a, #111b22); box-shadow: 0 6px 24px #0000000c; transition: border-color .2s, background .2s; }
.site-dark .catalog-page .story-card:hover { border-color: #466a5c; background: linear-gradient(115deg, #182a2b, #132126); }
.catalog-page .story-card .cover { display: block; width: 110px; height: 155px; overflow: hidden; border-radius: 10px; background: #20313a; border: 1px solid #ffffff10; box-shadow: 0 6px 16px #0004; }
.catalog-page .story-card .cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.catalog-page .story-card:hover .cover img { transform: scale(1.035); }
.story-card-content { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.story-status { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; line-height: 1.5; color: #c3b492; padding: 3px 7px; border: 1px solid #c6a96825; border-radius: 6px; background: #c6a96809; }
.story-status > span { display: inline-block; width: 4px; height: 4px; background: currentColor; border-radius: 50%; }
.story-status.finished { color: #8cddbb; border-color: #6ee7b72b; background: #6ee7b70a; }
.catalog-page .story-card .title { font-size: 18px; font-weight: 700; letter-spacing: -.4px; line-height: 1.45; margin: 7px 0 5px; overflow-wrap: anywhere; }
.site-dark .catalog-page .story-card .title a { color: #e3edf2; }
.site-dark .catalog-page .story-card .title a:hover { color: #9cf1cd; }
.story-author { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font-size: 12px; color: #9aaeba; overflow-wrap: anywhere; }
.story-author i { color: #6b8e88; font-size: 10px; flex-shrink: 0; }
.story-genres { display: flex; flex-wrap: wrap; gap: 5px; }
.site-dark .story-genres :is(a, span) { display: inline-flex; align-items: center; border: 1px solid #34464b; border-radius: 5px; padding: 2px 7px; color: #a6bdbf; background: #ffffff03; font-size: 10px; line-height: 1.6; }
.site-dark .story-genres a:hover { border-color: #6ee7b766; color: #a1ebca; background: #6ee7b708; }
.story-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding-top: 12px; margin-top: auto; }
.story-card-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 11px; color: #8ca5b3; }
.story-card-stats > span { display: inline-flex; align-items: center; gap: 5px; }
.story-card-stats b { color: #bbcec9; font-weight: 600; }
.story-card-stats i { font-size: 10px; color: #6d9487; }
.site-dark .story-card-more { display: inline-flex; align-items: center; gap: 8px; color: #a4d1be; font-size: 10px; white-space: nowrap; }
.story-card-more > span { font-size: 16px; }
.catalog-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin: 24px 0 0; padding: 20px 0 0; border-top: 1px solid #26353d; }
.catalog-pagination > span { color: #8097a5; font-size: 11px; }
.catalog-pagination > span strong { color: #c3d9cf; }
.story-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.site-dark .story-pagination :is(a, .pagination-gap) { display: grid; place-items: center; min-width: 32px; height: 34px; padding: 0 7px; border: 1px solid #2a3e43; border-radius: 8px; color: #acc4c4; font-size: 11px; background: #142027; }
.site-dark .story-pagination .pagination-gap { min-width: 16px; background: none; border: 0; color: #5f7c85; padding: 0; }
.site-dark .story-pagination a:hover { background: #20382f; color: #b4f4d9; border-color: #4c826a; }
.site-dark .story-pagination a.active { border-color: #6ee7b7; color: #0a2a1d; background: #6ee7b7; font-weight: 700; }
.story-section-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.story-section-heading .story-eyebrow { display: block; font-size: 8px; letter-spacing: 1.5px; margin-bottom: 5px; }
.story-section-heading h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.5px; line-height: 1.3; }
.story-section-icon { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; border: 1px solid #6ee7b71c; background: #6ee7b708; color: #8cd8b6; font-size: 14px; }
.recommendation-panel { padding: 22px 20px 8px; border: 1px solid #293c41; background: linear-gradient(160deg, #152129, #101920); border-radius: 16px; }
.recommendation-panel .story-section-heading { gap: 10px; margin-bottom: 10px; }
.recommendation-panel .story-section-heading h2 { font-size: 18px; }
.recommendation-list { list-style: none; padding: 0; margin: 0; }
.recommendation-list li { display: flex; align-items: flex-start; gap: 13px; padding: 17px 0; border-top: 1px solid #ffffff08; }
.recommendation-list li:first-child { border-top: 0; }
.recommendation-list li > div { min-width: 0; }
.recommendation-rank { color: #536f78; font-size: 20px; font-weight: 700; line-height: 1.4; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.recommendation-list li:nth-child(-n+3) .recommendation-rank { color: #7dd6b1; }
.site-dark .recommendation-list a { color: #cbdce3; font-size: 13px; font-weight: 600; line-height: 1.55; display: block; }
.site-dark .recommendation-list a:hover { color: #9bf0cb; }
.recommendation-list p { color: #8aa6b1; font-size: 11px; line-height: 1.5; margin: 5px 0 0; }
.story-page .reader-spotlight { margin-bottom: 24px; }
.story-page .reading-sidebar { min-width: 0; }
.story-shelf { padding-top: 30px; margin-top: 36px; border-top: 1px solid #27373d; }
.story-shelf-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px 18px; }
.catalog-page .story-shelf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.shelf-book { min-width: 0; }
.shelf-cover { position: relative; display: block; aspect-ratio: 2 / 3; border-radius: 10px; overflow: hidden; background: #1b2d33; box-shadow: 0 6px 20px #0003; }
.shelf-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s ease; }
.shelf-book:hover .shelf-cover img { transform: scale(1.03); }
.shelf-status { position: absolute; bottom: 8px; left: 8px; font-size: 8px; font-weight: 700; color: #a1f5cf; background: #0b2c20ef; border: 1px solid #6ee7b745; border-radius: 4px; padding: 2px 5px; }
.shelf-book h3 { font-size: 12px; font-weight: 600; line-height: 1.6; margin: 12px 0 4px; }
.shelf-book h3 a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #ccdce5; }
.shelf-book > p { color: #7f9ba6; font-size: 10px; margin: 0; }
.story-empty { text-align: center; padding: 38px 20px; border: 1px dashed #334b4c; border-radius: 14px; color: #9ab0bb; font-size: 12px; }
.story-empty > i { color: #7cb9a1; font-size: 25px; margin-bottom: 16px; }
.story-empty h2 { font-size: 19px; font-weight: 600; }
.story-empty p { max-width: 340px; margin: 10px auto 20px; }
.story-muted { color: #8da7b2; font-size: 12px; }
.site-dark .story-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 42px; padding: 11px 15px; border-radius: 9px; border: 1px solid #35504b; font-size: 12px; font-weight: 700; line-height: 1.4; }
.site-dark .story-button.primary { color: #09291d; background: #86e4bb; border-color: #86e4bb; }
.site-dark .story-button.primary:hover { color: #08271b; background: #a5f3ce; border-color: #a5f3ce; }
.site-dark .story-button.secondary { color: #bbd4cc; background: #ffffff03; }
.site-dark .story-button.secondary:hover { color: #b6f5d9; background: #6ee7b70c; border-color: #6ee7b775; }
.story-button i { font-size: 10px; }

/* Book detail: cover, identity and reading actions form one compact hero. */
.book-hero { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 28px; padding: 28px; border: 1px solid #31453f; border-radius: 20px; background: radial-gradient(ellipse at top left, #30634c2e, transparent 65%), linear-gradient(150deg, #17242a, #111b22); }
.book-cover-stage { align-self: start; padding-top: 8px; min-width: 0; }
.book-cover { display: block; width: 100%; aspect-ratio: 2 / 3; height: auto; object-fit: cover; border: 1px solid #ffffff20; border-radius: 8px 13px 13px 8px; box-shadow: 8px 12px 30px #0006, -3px 0 0 #32433d; }
.book-cover-caption { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 7px; color: #6f9886; letter-spacing: 1.2px; margin-top: 18px; }
.book-cover-caption i { font-size: 9px; }
.book-hero-content { min-width: 0; }
.book-hero h1 { font-size: clamp(25px, 2.8vw, 34px); font-weight: 800; line-height: 1.28; letter-spacing: -1px; margin: 12px 0 10px; overflow-wrap: anywhere; }
.book-author { font-size: 11px; color: #8ca59f; margin-bottom: 14px; }
.book-author a { color: #c9ded3; margin-left: 6px; font-weight: 600; }
.book-hero .story-genres { gap: 6px; }
.book-hero .story-genres a { font-size: 10px; }
.book-numbers { display: flex; gap: 28px; margin: 22px 0; padding: 18px 0; border-top: 1px solid #ffffff0b; border-bottom: 1px solid #ffffff0b; }
.book-numbers > div { display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; align-items: center; }
.book-numbers i { grid-row: 1 / 3; color: #7dab98; font-size: 16px; margin-right: 3px; }
.book-numbers strong { color: #dcece2; font-size: 21px; line-height: 1.3; letter-spacing: -.5px; font-weight: 700; }
.book-numbers span { font-size: 9px; color: #789b91; }
.book-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.book-source { color: #6b888e; font-size: 9px; margin: 14px 0 0; overflow-wrap: anywhere; }
.book-description-panel, .chapter-panel { margin-top: 24px; padding: 26px; border: 1px solid #283c40; border-radius: 16px; background: #111c23; }
.book-description { font-size: 14px; color: #b0c3cd; line-height: 1.95; overflow-wrap: anywhere; }
.book-description :is(p, span, div, font, b, strong) { color: inherit !important; background: transparent !important; }
.book-description > :last-child { margin-bottom: 0; }
.book-description :is(img, video, iframe, embed, object) { max-width: 100%; height: auto; }
.book-description img { display: block; margin: 15px auto; border-radius: 9px; }
.book-description.is-collapsed { max-height: 240px; overflow: hidden; mask-image: linear-gradient(#000 65%, transparent); }
.description-toggle { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px 0 0; margin-top: 14px; border: 0; border-top: 1px solid #ffffff0a; background: transparent; color: #94ddbd; font-size: 11px; font-weight: 600; }
.description-toggle[hidden] { display: none; }
.description-toggle i { font-size: 9px; }
.description-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.detailCol > .reader-spotlight { margin-top: 24px; }
.chapter-panel { scroll-margin-top: 20px; }
.chapter-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.chapter-panel-head .story-section-heading { margin: 0; }
.chapter-latest { font-size: 10px; color: #91cbb1; white-space: nowrap; }
.chapter-latest > span { margin-left: 5px; }
.chapter-search-form { display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 14px; border: 1px solid #2b4348; background: #0d171e; border-radius: 10px; }
.chapter-search-form:focus-within { border-color: #6ee7b780; }
.chapter-search-form > i { font-size: 12px; color: #719b8e; }
.site-dark .chapter-search-form input, .site-dark .chapter-search-form input:focus { width: 100%; min-width: 0; background: transparent; outline: none; border: 0; padding: 6px 0; font-size: 12px; color: #d6e7df; box-shadow: none; }
.chapter-search-form button { flex-shrink: 0; padding: 9px 12px; border: 1px solid #3d5c50; border-radius: 7px; background: #1b3329; color: #b2e5cd; font-size: 10px; font-weight: 600; }
.chapter-search-form button > span { margin-left: 6px; }
.chapter-search-form button:hover { background: #284d3a; }
.chapter-search-feedback { font-size: 11px; color: #f0c59b; margin: 10px 0; }
.chapter-search-feedback:empty { margin: 0 0 14px; }
.chapter-list ul { padding: 0; margin: 0; list-style: none; }
.chapter-list li { display: flex; align-items: center; gap: 14px; border-bottom: 1px solid #ffffff08; border-radius: 8px; }
.chapter-list li:last-child { border-bottom: 0; }
.site-dark .chapter-list li:hover { background: #192b2b; }
.chapter-link { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; padding: 14px 0; color: #bfd1d9; }
.chapter-order { display: grid; place-items: center; width: 34px; min-height: 36px; flex-shrink: 0; border: 1px solid #2c4146; border-radius: 8px; background: #18272e; color: #769b8e; font-size: 11px; font-variant-numeric: tabular-nums; }
.chapter-label { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.chapter-label small { color: #71919f; font-size: 9px; }
.chapter-label strong { color: #c4d7df; font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.chapter-link:hover .chapter-label strong { color: #a1eecb; }
.chapter-meta { color: #6f8d9b; font-size: 9px; white-space: nowrap; padding-right: 4px; }
.pager.pager--buttons { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid #2b3c42; }
.site-dark .book-page .pg-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 8px 13px; border: 1px solid #355047; border-radius: 8px; background: #1a3028; color: #b9e4cf; font-size: 11px; line-height: 1.4; }
.site-dark .book-page .pg-btn:disabled { opacity: .45; cursor: not-allowed; }
.site-dark .book-page .pg-btn:hover:not(:disabled) { background: #284d3c; border-color: #6ee7b7; }
.site-dark .book-page .pg-indicator { color: #8fb1ac; font-size: 10px; background: transparent; border: 0; }
.chapter-panel .loading { text-align: center; padding: 35px; color: #94b9ad; font-size: 12px; }

@media (max-width: 1024px) {
  .story-page .main-wrapper { grid-template-columns: minmax(0, 1fr); }
  .story-page .reading-sidebar { display: none; }
  .story-shelf-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .book-hero { grid-template-columns: 210px minmax(0, 1fr); padding: 32px; gap: 32px; }
}
@media (max-width: 680px) {
  .story-breadcrumbs { margin-bottom: 20px; font-size: 10px; }
  .catalog-heading { margin-bottom: 20px; }
  .catalog-heading h1 { font-size: 27px; }
  .catalog-heading > p { font-size: 12px; }
  .site-dark .catalog-page .story-card { grid-template-columns: 90px minmax(0, 1fr); gap: 14px; padding: 14px; border-radius: 13px; }
  .catalog-page .story-card .cover { width: 90px; height: 132px; border-radius: 8px; }
  .catalog-page .story-card .title { font-size: 15px; line-height: 1.5; margin-top: 5px; }
  .story-card-content .story-status { font-size: 9px; padding: 2px 6px; }
  .story-author { font-size: 11px; gap: 5px; margin-bottom: 8px; }
  .story-card-content .story-genres :is(a, span) { font-size: 10px; padding: 1px 5px; }
  .story-card-stats { font-size: 10px; gap: 9px; }
  .story-card-stats i { font-size: 9px; }
  .story-card-footer { padding-top: 10px; }
  .story-card-more { font-size: 0 !important; gap: 0 !important; }
  .story-card-more > span { font-size: 16px; }
  .catalog-pagination { justify-content: center; }
  .catalog-pagination > span { width: 100%; text-align: center; }
  .story-pagination { gap: 4px; }
  .site-dark .story-pagination a { min-width: 30px; height: 32px; padding-inline: 6px; }
  .story-shelf-grid, .catalog-page .story-shelf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 12px; }
  .story-shelf .story-section-heading h2 { font-size: 19px; }
  .shelf-book h3 { font-size: 11px; margin-top: 9px; }
  .shelf-book > p { font-size: 9px; }
  .book-hero { grid-template-columns: minmax(0, 1fr); padding: 26px 22px; gap: 24px; border-radius: 17px; }
  .book-cover-stage { width: 155px; margin: auto; padding-top: 0; }
  .book-cover-caption { margin-top: 14px; }
  .book-hero-content { text-align: center; }
  .book-hero h1 { font-size: 29px; letter-spacing: -.8px; margin-block: 12px; }
  .book-hero .story-genres { justify-content: center; }
  .book-author { font-size: 12px; }
  .book-numbers { justify-content: center; gap: 42px; margin-block: 20px; text-align: left; }
  .book-numbers strong { font-size: 22px; }
  .book-actions { justify-content: center; }
  .book-description-panel, .chapter-panel { padding: 20px 17px; border-radius: 14px; margin-top: 20px; }
  .book-description { font-size: 14px; }
  .story-section-heading { gap: 10px; margin-bottom: 20px; }
  .story-section-heading h2 { font-size: 19px; }
  .story-section-heading .story-eyebrow { font-size: 7px; letter-spacing: 1.2px; }
  .story-section-icon { width: 34px; height: 34px; border-radius: 10px; font-size: 12px; }
  .chapter-panel-head { align-items: flex-start; }
  .chapter-latest { font-size: 9px; padding-top: 3px; white-space: normal; text-align: right; max-width: 75px; }
  .chapter-meta { display: none; }
  .chapter-label strong { font-size: 13px; }
  .chapter-search-form { gap: 8px; padding-left: 10px; }
  .site-dark .chapter-search-form input { font-size: 11px; }
  .chapter-search-form button { padding: 9px; font-size: 9px; }
  .chapter-search-form button > span { display: none; }
  .chapter-link { gap: 10px; }
  .pager.pager--buttons { gap: 7px; }
  .site-dark .book-page .pg-btn { padding-inline: 10px; }
  .site-dark .book-page .pg-indicator { font-size: 9px; }
}
@media (max-width: 359px) {
  .site-dark .catalog-page .story-card { grid-template-columns: 76px minmax(0, 1fr); padding: 12px; gap: 11px; }
  .catalog-page .story-card .cover { width: 76px; height: 112px; }
  .catalog-page .story-card .title { font-size: 14px; }
  .story-card-stats { gap: 6px; font-size: 9px; }
  .story-card-more { display: none !important; }
  .book-hero { padding: 24px 16px; }
  .book-hero h1 { font-size: 26px; }
  .book-actions { flex-direction: column; align-items: stretch; }
}