:root {
  --ink:#21372f; --muted:#63746a; --leaf:#39775c; --pale:#f2f5e9;
  --cream:#fbf8f1; --line:#dce5d8; --amber:#a85f27;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:"Microsoft YaHei",system-ui,sans-serif; }
button,input,select { font:inherit; }
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid #82b69b; outline-offset:3px; }
.site { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px clamp(20px,5vw,80px); border-bottom:1px solid var(--line); background:#fffdf9; }
.brand { font-family:Georgia,"Microsoft YaHei",serif; font-size:24px; font-weight:700; letter-spacing:.08em; }
.badge,.pilot { color:var(--leaf); font-size:12px; background:var(--pale); border-radius:999px; padding:8px 14px; white-space:nowrap; }
main { max-width:1280px; margin:auto; padding:0 28px; }
.hero { padding:50px 0 32px; }
.eyebrow { color:var(--leaf); font-weight:700; font-size:12px; letter-spacing:.15em; margin:0 0 10px; }
.hero h1 { font-family:Georgia,"Microsoft YaHei",serif; font-size:clamp(42px,5vw,70px); line-height:1.25; margin:0 0 14px; }
.hero h1 em { font-style:normal; color:var(--leaf); }
.hero > p:not(.eyebrow):not(.age-help) { max-width:660px; line-height:1.8; color:var(--muted); }
.hero-tools { display:flex; flex-wrap:wrap; gap:16px; margin-top:24px; }
.hero-field { display:grid; gap:8px; font-size:13px; font-weight:700; }
.hero-field select,.hero-field input { border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:#fff; min-height:48px; width:100%; min-width:0; }
.hero-field select { min-width:150px; }
.hero-field.search { flex:1; max-width:480px; min-width:220px; }
.age-help { font-size:12px; color:var(--muted); line-height:1.6; margin:10px 0 0; }
.selector { padding:0 0 32px; border-bottom:1px solid var(--line); }
.mode-switch { display:inline-flex; gap:4px; padding:4px; border:1px solid var(--line); border-radius:999px; background:#f3f5ed; }
.mode-switch button { border:0; border-radius:999px; padding:10px 18px; background:transparent; color:var(--muted); cursor:pointer; font-weight:700; }
.mode-switch button[aria-pressed="true"] { background:#fff; color:var(--leaf); box-shadow:0 2px 8px #18342416; }
.guided-panel,.custom-panel { margin-top:26px; }
.selector-heading { display:flex; align-items:start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.selector-heading h2 { font-size:25px; margin:0 0 7px; }
.selector-heading p { margin:0; color:var(--muted); font-size:13px; line-height:1.6; }
.text-button { border:0; background:none; color:var(--leaf); cursor:pointer; font-size:13px; white-space:nowrap; }
.text-button:hover { text-decoration:underline; }
.quick-picks,.related-picks { display:flex; flex-wrap:wrap; gap:10px; }
.quick-pick,.related-pick { border:1px solid #bdd5c5; color:var(--leaf); background:#fff; border-radius:999px; padding:10px 16px; cursor:pointer; }
.quick-pick:hover,.quick-pick[aria-pressed="true"],.related-pick:hover,.related-pick[aria-pressed="true"] { background:var(--leaf); color:#fff; }
.quick-pick[aria-pressed="true"],.related-pick[aria-pressed="true"] { box-shadow:0 0 0 3px #d8e9dc; }
.related-panel { margin-top:22px; padding:22px 24px; border:1px solid #d7e4d2; border-radius:18px; background:#f1f6eb; }
.related-panel h3 { font-size:19px; margin:0 0 7px; }
.related-panel p { color:var(--muted); font-size:13px; line-height:1.6; margin:0 0 15px; }
.related-picks { color:var(--muted); font-size:13px; }
.custom-panel { padding:22px 24px; border:1px solid var(--line); border-radius:18px; background:#fff; }
.filter-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.filter-top h2 { font-size:21px; margin:0; }
.filter-intro { color:var(--muted); line-height:1.6; font-size:12px; margin:8px 0 18px; }
.custom-panel #facets { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.filter-group { border-top:1px solid var(--line); padding:16px 0; }
.filter-group > summary { cursor:pointer; color:var(--ink); font-size:15px; font-weight:700; }
.filter-group[open] > summary { margin-bottom:16px; }
.facet { margin:0 0 20px; }
.facet:last-child { margin-bottom:0; }
.facet h3 { color:var(--muted); font-size:12px; margin:0 0 10px; }
.choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 8px; }
.check { display:flex; align-items:flex-start; gap:7px; font-size:12px; line-height:1.5; cursor:pointer; }
.check input { accent-color:var(--leaf); margin:3px 0 0; }
.results { padding:34px 0 72px; }
.result-head,.card-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.result-head { margin-bottom:12px; }
.result-head h2 { font-size:28px; margin:0; }
.shuffle-books { border:1px solid var(--leaf); border-radius:999px; padding:8px 16px; background:#fff; color:var(--leaf); font:inherit; font-size:14px; cursor:pointer; white-space:nowrap; }
.shuffle-books:hover { background:var(--pale); }
.shuffle-books:disabled { opacity:.55; cursor:wait; }
.shuffle-books[hidden] { display:none; }
.active-filters { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; min-height:30px; }
.active-filters:empty { display:none; }
.result-hint { color:var(--muted); font-size:13px; line-height:1.6; margin:-10px 0 20px; }
.result-hint:empty { display:none; }
.active-chip { border:1px solid var(--line); border-radius:999px; padding:5px 10px; background:#fff; color:var(--ink); cursor:pointer; font-size:12px; }
.active-chip:hover { border-color:var(--leaf); }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px; align-items:stretch; }
.card { min-width:0; background:#fff; border:1px solid #e1e7dd; border-radius:17px; box-shadow:0 7px 22px #18342409; overflow:hidden; }
.cover-frame { width:100%; height:276px; padding:18px; display:grid; place-items:center; overflow:hidden; background:linear-gradient(145deg,#f8f7f1,#eef2e9); border-bottom:1px solid #e9ede5; }
.card-cover { display:block; width:100%; height:100%; object-fit:contain; object-position:center; filter:drop-shadow(0 5px 7px #24342824); }
.card-cover.spread-right { object-fit:cover; object-position:right center; filter:none; }
.card-cover.trim-edges { object-fit:cover; transform:scale(1.06); }
.cover-placeholder { display:grid; place-items:center; width:72%; height:84%; border:1px solid #dce7d8; border-radius:5px; background:#fcfdf9; color:#819885; font-size:13px; letter-spacing:.12em; }
.card-body { display:flex; flex-direction:column; flex:1; min-width:0; padding:14px 18px 15px; }
.card h3 { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:18px; line-height:1.35; margin:0 0 5px; }
.book-author { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden; margin:0 0 11px; color:var(--muted); font-size:12px; line-height:1.5; }
.match-reason { margin:0 0 12px; color:var(--leaf); font-size:12px; line-height:1.5; font-weight:700; }
.book-tags { display:flex; align-items:center; flex-wrap:nowrap; gap:6px; min-width:0; margin-top:auto; overflow:hidden; }
.cards .chip,.tag-overflow { display:inline-block; flex:none; white-space:nowrap; border:1px solid #e3eade; border-radius:999px; padding:4px 8px; background:#f2f6ef; color:#4a6955; font-size:11px; line-height:1.3; }
.cards .chip:nth-child(n) { background:#f2f6ef; color:#4a6955; }
.cards .chip[hidden],.tag-overflow[hidden],.tag-tooltip[hidden] { display:none; }
.tag-overflow { background:#f7f7f3; color:#7b897c; cursor:help; }
.tag-overflow:focus-visible { outline:2px solid var(--leaf); outline-offset:2px; }
.tag-tooltip { position:fixed; z-index:100; max-width:min(320px,calc(100vw - 16px)); padding:9px 12px; border-radius:9px; background:#263b30; box-shadow:0 6px 18px #18342435; color:#fff; font-size:12px; line-height:1.6; pointer-events:none; }
.chip { display:inline-block; border-radius:999px; padding:5px 9px; font-size:12px; line-height:1.3; background:#def5e4; color:#14683a; }
.chip:nth-child(3n+2) { background:#e7efff; color:#3159ac; }
.chip:nth-child(3n) { background:#f0e8ff; color:#6744a8; }
.more { display:block; margin:24px auto 0; border:1px solid var(--leaf); border-radius:999px; padding:10px 22px; background:#fff; color:var(--leaf); cursor:pointer; }
.more[hidden] { display:none; }
#empty { background:#fff; border:1px dashed var(--line); border-radius:12px; padding:30px; color:var(--muted); }
footer { text-align:center; padding:28px; color:#819084; font-size:12px; border-top:1px solid var(--line); }
footer p { margin:0; }
footer p + p { margin-top:8px; }
footer a { color:inherit; text-decoration:none; }
footer a:hover { text-decoration:underline; }
footer .footer-records { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 20px; }
footer .footer-records a { display:inline-flex; align-items:center; gap:5px; }
footer .footer-records img { width:20px; height:20px; flex-shrink:0; }
@media(max-width:1000px) {
  .pilot { display:none; }
}
@media(max-width:760px) {
  .custom-panel #facets { grid-template-columns:1fr; gap:0; }
  .results { padding-top:24px; }
}
@media(max-width:500px) {
  main { padding:0 16px; }
  .site { padding:12px 16px; }
  .badge { display:none; }
  .hero { padding:36px 0 24px; }
  .hero-tools { display:grid; }
  .hero-field.search { min-width:0; max-width:100%; }
  .mode-switch { display:flex; width:100%; }
  .mode-switch button { flex:1; }
  .selector-heading h2 { font-size:22px; }
  .related-panel,.custom-panel { padding:18px; }
  .card-body { padding:18px; }
}

/* Book detail */
.brand-link { color:inherit; text-decoration:none; }
.brand-link:hover { color:var(--leaf); }
.card-link { display:flex; flex-direction:column; height:100%; color:inherit; text-decoration:none; }
.card:hover { box-shadow:0 12px 32px #18342418; transform:translateY(-2px); }
.card { transition:box-shadow .18s ease,transform .18s ease; }
.card-link:focus-visible,.brand-link:focus-visible,.breadcrumb a:focus-visible,.purchase-link:focus-visible { outline:3px solid #82b69b; outline-offset:3px; }
.detail-page { background:#fff; color:#222; }
.detail-page .site { background:#fff; }
.detail-main { max-width:1380px; min-height:calc(100vh - 150px); }
.breadcrumb { display:flex; align-items:center; gap:10px; padding:24px 0 28px; color:#757575; font-size:14px; }
.breadcrumb a { color:var(--leaf); text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }
.detail-status { padding:48px 0; color:var(--muted); }
.detail-hero { display:grid; grid-template-columns:280px minmax(0,1fr); grid-template-rows:auto 1fr; grid-template-areas:"cover heading" "cover facts"; gap:12px 40px; align-items:start; padding-bottom:42px; }
.detail-heading { grid-area:heading; }
.detail-age { display:inline-block; margin:0 0 14px; padding:7px 14px; border-radius:999px; background:#fff4e8; color:#c55d20; font-size:13px; font-weight:700; }
.detail-heading h1 { font-size:clamp(32px,3.3vw,44px); line-height:1.25; margin:0; letter-spacing:.01em; }
.detail-cover { grid-area:cover; width:280px; aspect-ratio:3/4; overflow:hidden; border-radius:18px; background:#f4f4ef; box-shadow:0 12px 24px #00000014; }
.detail-cover-image { display:block; width:100%; height:100%; object-fit:cover; }
.detail-cover-image.spread-right { object-position:right center; transform:scale(1.12); }
.detail-cover-image.trim-edges { transform:scale(1.15); }
.detail-cover-missing { display:flex; align-items:center; justify-content:center; width:100%; height:100%; padding:25px; color:var(--leaf); font-size:22px; font-weight:700; text-align:center; background:linear-gradient(145deg,#f0f5e8,#dceadd); }
.detail-facts { grid-area:facts; min-width:0; }
.detail-metadata { display:grid; grid-template-columns:90px minmax(0,1fr); gap:6px 14px; margin:4px 0 22px; font-size:15px; line-height:1.55; }
.detail-metadata dt { color:#898989; }
.detail-metadata dd { min-height:23px; margin:0; color:#303030; }
.douban-rating { display:flex; align-items:baseline; gap:10px; margin:0 0 20px; color:#a65922; }
.douban-rating[hidden],.douban-source[hidden],.author-intro-section[hidden] { display:none; }
.douban-rating strong { font-size:29px; line-height:1; }
.douban-rating span { color:#777; font-size:13px; }
.douban-source { display:inline-block; margin-top:16px; color:var(--leaf); font-size:13px; text-decoration:none; }
.douban-source:hover { text-decoration:underline; }
.author-intro-section { border-top:1px solid #ededed; padding:32px 0 40px; }
.author-intro-section h2 { margin:0 0 16px; font-size:21px; }
.author-intro-section p { max-width:1120px; margin:0; color:#676767; font-size:15px; line-height:1.9; white-space:pre-line; }
.detail-tags { display:flex; flex-wrap:wrap; gap:8px; min-height:32px; margin:0 0 22px; }
.detail-tags .chip { padding:6px 12px; font-size:13px; }
.detail-purchase h2 { margin:0 0 10px; color:#777; font-size:15px; font-weight:700; }
.purchase-links { display:flex; flex-wrap:wrap; gap:10px; min-height:34px; }
.purchase-link { display:inline-block; border:1px solid #dedede; border-radius:999px; padding:8px 16px; color:var(--leaf); text-decoration:none; font-size:13px; }
.purchase-link:hover { border-color:var(--leaf); background:#f4f8f1; }
.detail-description { border-top:1px solid #e2e2e2; padding:38px 0 48px; }
.detail-description h2,.detail-extras h2 { margin:0 0 18px; font-size:21px; }
.detail-description p { max-width:1120px; margin:0; color:#676767; font-size:15px; line-height:1.9; white-space:pre-line; }
.detail-extras { border-top:1px solid #ededed; padding:42px 0 72px; }
.preview-section,.detail-warning { max-width:920px; }
.preview-tip { display:flex; align-items:flex-start; gap:12px; margin:0 0 22px; padding:12px 16px; border-left:3px solid var(--leaf); border-radius:0 10px 10px 0; background:#f4f8f1; }
.preview-tip-label { flex:none; padding-top:2px; color:var(--leaf); font-size:13px; font-weight:700; }
.preview-tip p { margin:0; color:#526558; font-size:14px; line-height:1.7; white-space:pre-line; }
.book-preview { min-width:0; }
.preview-pages { display:grid; gap:18px; }
.preview-page { display:block; margin:0; overflow:hidden; border-radius:14px; background:#f4f3ee; }
.preview-image { display:block; width:100%; height:auto; }
.preview-page-error { padding:28px; color:#666; font-size:14px; }
.preview-empty { display:grid; place-items:center; min-height:220px; margin:0; border-radius:14px; background:#f4f3ee; color:#666; text-align:center; }
.detail-warning { margin:32px 0 0; }
.detail-warning p { margin:0; color:#676767; font-size:14px; line-height:1.85; }
.detail-warning .book-tags { margin-top:14px; }
.detail-warning .chip { background:#fff0df; color:#915015; }
@media(max-width:760px) {
  .detail-main { padding:0 20px; }
  .breadcrumb { padding:18px 0 24px; }
  .detail-hero { grid-template-columns:minmax(0,1fr); grid-template-rows:auto; grid-template-areas:"heading" "cover" "facts"; gap:0; padding-bottom:30px; }
  .detail-heading { margin-bottom:22px; }
  .detail-heading h1 { font-size:32px; }
  .detail-cover { width:min(72vw,280px); justify-self:center; margin-bottom:26px; }
  .detail-metadata { grid-template-columns:78px minmax(0,1fr); gap:7px 10px; font-size:14px; }
  .detail-tags { margin-bottom:24px; }
  .detail-description { padding:28px 0 36px; }
  .detail-description p { font-size:14px; }
  .detail-extras { padding-top:34px; }
  .preview-tip { flex-direction:column; gap:4px; }
}
@media(max-width:500px) {
  .detail-main { padding:0 18px; }
  .detail-page .badge { display:none; }
  .detail-heading h1 { font-size:30px; }
}

.local-source[hidden] { display:none; }
.local-source { margin:0 0 64px; padding:22px 24px; border:1px solid #cbdccf; border-radius:16px; background:#f5f9f4; }
.local-source-eyebrow { margin:0 0 5px; color:var(--leaf); font-size:12px; font-weight:700; }
.local-source h2 { margin:0 0 8px; font-size:20px; }
.local-source-state { margin:0 0 15px; color:var(--muted); font-size:13px; }
.local-source code { display:block; padding:13px 15px; border:1px solid var(--line); border-radius:10px; background:#fff; color:#304b3a; font-size:13px; line-height:1.6; overflow-wrap:anywhere; user-select:all; }
.local-source-actions { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-top:14px; }
.local-source-actions button { border:1px solid var(--leaf); border-radius:999px; padding:8px 13px; background:#fff; color:var(--leaf); cursor:pointer; font-size:13px; }
.local-source-actions button:hover { background:var(--leaf); color:#fff; }
#copy-source-status { color:var(--leaf); font-size:12px; }
.douban-match-note{max-width:680px;color:#95632f;background:#fff7ea;border-left:3px solid #d7a65a;padding:9px 12px;font-size:13px;line-height:1.6;margin:0 0 16px}.douban-match-note[hidden]{display:none}

.admin-preview { background:#fff; }
.admin-preview .site,.admin-preview .breadcrumb,.admin-preview footer,.admin-preview .local-source { display:none; }
.admin-preview .detail-main { padding-top:28px; }

/* Parent-facing pages: warm accent, airy panels, and a cover-led book grid. */
.home-page,.detail-page:not(.admin-preview) {
  --ink:#27343b; --muted:#66757b; --leaf:#bb4d2e; --pale:#fff1e9;
  --line:#e8e7e2; --cream:#f8faf9;
}
.home-page {
  background:radial-gradient(ellipse 65% 440px at 8% 0,#fce2e0 0,transparent 82%),
    radial-gradient(ellipse 68% 520px at 92% 7%,#c4f2f8 0,transparent 78%),
    radial-gradient(ellipse 60% 600px at 45% 35%,#e2f8ed 0,transparent 78%),
    #f8faf9;
}
.home-page .site,.detail-page:not(.admin-preview) .site {
  min-height:68px; border-color:#ffffffb8; background:#ffffffd9;
  backdrop-filter:blur(16px);
}
.home-page .site,.detail-page:not(.admin-preview) .site { padding-inline:max(28px,calc(50% - 612px)); }
.home-page .brand,.detail-page:not(.admin-preview) .brand { color:var(--leaf); }
.home-page .badge,.detail-page:not(.admin-preview) .badge { color:#91533e; background:#fff3eb; }
.home-page main { max-width:1280px; }
.home-page .hero {
  margin:26px 0 20px; padding:38px 36px 32px; text-align:center;
  border:1px solid #ffffffc9; border-radius:28px;
  background:linear-gradient(115deg,#fffaf8e8 0,#f7fbffe3 58%,#e8fbf8d9 100%);
  box-shadow:0 16px 42px #38576414;
}
.home-page .hero h1 {
  margin:0 0 26px; font-family:"Microsoft YaHei",system-ui,sans-serif;
  font-size:clamp(32px,3.7vw,46px); font-weight:800; line-height:1.25;
}
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.home-page .hero-tools { display:block; max-width:880px; margin:0 auto; text-align:left; }
.home-page .hero-search {
  width:100%; min-height:52px; padding:12px 18px; border:1px solid #e6e9e7;
  border-radius:14px; background:#fff; color:var(--ink);
  box-shadow:0 2px 8px #263c4610;
}
.home-page .hero-search::placeholder { color:#89939a; }
.home-page .age-filter { max-width:880px; margin:20px auto 0; text-align:left; }
.home-page .age-label { margin-bottom:10px; color:#53636a; font-size:13px; font-weight:700; }
.home-page .age-picks { display:flex; flex-wrap:wrap; gap:9px; }
.home-page .age-pick {
  min-height:40px; padding:8px 17px; border:1px solid #dfe6e2;
  border-radius:12px; background:#fff; color:#415864; cursor:pointer;
  font-size:13px; font-weight:700; transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.home-page .age-pick:hover { border-color:var(--leaf); transform:translateY(-1px); }
.home-page .age-pick[aria-pressed="true"] { border-color:var(--leaf); background:var(--leaf); color:#fff; box-shadow:0 2px 8px #39775c2b; }
.home-page .selector,.home-page .results {
  border:1px solid #ffffffd6; border-radius:28px; background:#fffffff0;
  box-shadow:0 14px 42px #3e596414;
}
.home-page .selector { margin-bottom:20px; padding:26px 30px 30px; }
.home-page .mode-switch { padding:4px; border-color:#eee9e3; background:#f5f5f2; }
.home-page .mode-switch button { padding:9px 20px; }
.home-page .mode-switch button[aria-pressed="true"] {
  background:var(--leaf); color:#fff; box-shadow:0 3px 10px #bb4d2e30;
}
.home-page .guided-panel,.home-page .custom-panel { margin-top:23px; }
.home-page .selector-heading h2 { margin-bottom:0; font-size:23px; }
.home-page .text-button { font-weight:700; }
.home-page .quick-picks,.home-page .related-picks { gap:9px; }
.home-page .quick-pick,.home-page .related-pick {
  padding:9px 15px; border-color:#e8e5de; background:#fff; color:#415864;
  font-size:13px; font-weight:600; transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.home-page .quick-pick:nth-child(4n+1) { background:#fff6ee; }
.home-page .quick-pick:nth-child(4n+2) { background:#ecf8f4; }
.home-page .quick-pick:nth-child(4n+3) { background:#edf5ff; }
.home-page .quick-pick:nth-child(4n) { background:#f5efff; }
.home-page .quick-pick:hover,.home-page .related-pick:hover { border-color:var(--leaf); transform:translateY(-1px); }
.home-page .quick-pick[aria-pressed="true"],.home-page .related-pick[aria-pressed="true"] {
  border-color:var(--leaf); background:var(--leaf); color:#fff;
  box-shadow:0 0 0 3px #ffdfd2;
}
.home-page .related-panel {
  margin-top:24px; padding:20px 22px; border-color:#dcece9; border-radius:20px;
  background:linear-gradient(115deg,#f1fbf8,#f6f9ff);
}
.home-page .related-panel h3 { font-size:18px; }
.home-page .custom-panel { padding:20px 22px; border-color:#ebeeeb; background:#fbfdfc; }
.home-page .choices { display:flex; flex-wrap:wrap; gap:8px; }
.home-page .check {
  align-items:center; min-height:34px; padding:7px 11px; border:1px solid #e7e8e5;
  border-radius:999px; background:#fff; line-height:1.3;
}
.home-page .check:hover,.home-page .check:has(input:checked) { border-color:#e9b9a5; background:#fff3ec; color:#9b432a; }
.home-page .check input { width:14px; height:14px; margin:0; accent-color:var(--leaf); }
.home-page .results { padding:26px 30px 46px; margin-bottom:42px; }
.home-page .result-head { margin-bottom:14px; }
.home-page .result-head h2 { font-size:26px; }
.home-page .result-hint { margin:0 0 20px; font-size:12px; }
.home-page .active-filters { margin-bottom:16px; }
.home-page .active-chip { background:#fff9f4; border-color:#f1d6c8; color:#96503a; }
.home-page .cards { grid-template-columns:repeat(auto-fill,minmax(195px,1fr)); gap:16px; }
.home-page .card {
  border-color:#e8e9e7; border-radius:16px;
  box-shadow:0 4px 16px #1b38410c;
}
.home-page .card:hover { box-shadow:0 12px 26px #1b38411e; }
.home-page .cover-frame {
  height:260px; padding:10px; border-color:#eef0ec;
  background:linear-gradient(145deg,#f9faf8,#edf4f2);
}
.home-page .card-body { padding:13px 13px 15px; }
.home-page .card h3 { font-size:16px; line-height:1.35; }
.home-page .book-author { color:#78838a; font-size:11px; margin-bottom:9px; }
.home-page .cards .chip,.home-page .tag-overflow { padding:4px 8px; border:0; font-size:11px; }
.home-page .cards .chip:nth-child(3n+1) { background:#ffe9ec; color:#ad425d; }
.home-page .cards .chip:nth-child(3n+2) { background:#e7f0ff; color:#3a65a0; }
.home-page .cards .chip:nth-child(3n) { background:#e7f7ef; color:#24825b; }
.home-page .tag-overflow { background:#f1eef8; color:#725f90; }
.home-page .more { padding:10px 24px; border-color:#e9c7b8; color:var(--leaf); font-weight:700; }
.home-page .more:hover { background:#fff3ec; }
.home-page footer { border-color:#e7eae8; background:#ffffff8f; }

.detail-page:not(.admin-preview) { background:#fff; }
.detail-page:not(.admin-preview) .detail-main { max-width:1180px; }
.detail-page:not(.admin-preview) .breadcrumb { color:#849097; }
.detail-page:not(.admin-preview) .detail-hero {
  grid-template-columns:260px minmax(0,1fr); gap:12px 36px; padding-bottom:38px;
}
.detail-page:not(.admin-preview) .detail-cover { width:260px; border-radius:16px; box-shadow:0 10px 24px #263c4618; }
.detail-page:not(.admin-preview) .detail-age { background:#fff1e9; color:var(--leaf); }
.detail-page:not(.admin-preview) .detail-heading h1 { color:#26313b; font-size:clamp(30px,3vw,42px); }
.detail-page:not(.admin-preview) .detail-metadata { margin-bottom:18px; }
.detail-page:not(.admin-preview) .detail-tags .chip:nth-child(3n+1) { background:#ffe9ec; color:#ad425d; }
.detail-page:not(.admin-preview) .detail-tags .chip:nth-child(3n+2) { background:#e7f0ff; color:#3a65a0; }
.detail-page:not(.admin-preview) .detail-tags .chip:nth-child(3n) { background:#e7f7ef; color:#24825b; }
.detail-page:not(.admin-preview) .detail-description { padding:32px 0 40px; }
.detail-page:not(.admin-preview) .preview-tip { border-color:var(--leaf); background:#fff6f1; }
.detail-page:not(.admin-preview) .preview-tip-label { color:var(--leaf); }
.detail-page:not(.admin-preview) .preview-tip p { color:#765d55; }

@media(max-width:760px) {
  .home-page .hero { margin-top:18px; padding:30px 22px 26px; }
  .home-page .hero h1 { font-size:clamp(31px,6vw,40px); }
  .home-page .selector { padding:22px; }
  .home-page .results { padding:22px; }
  .detail-page:not(.admin-preview) .detail-hero {
    grid-template-columns:minmax(0,1fr); grid-template-areas:"heading" "cover" "facts"; gap:0;
  }
  .detail-page:not(.admin-preview) .detail-cover { justify-self:center; margin-bottom:26px; }
}
@media(max-width:500px) {
  .home-page .site,.detail-page:not(.admin-preview) .site { min-height:60px; padding-inline:16px; }
  .home-page .hero { padding:28px 18px 22px; border-radius:22px; }
  .home-page .hero h1 { margin-bottom:22px; }
  .home-page .age-pick { padding:8px 12px; }
  .home-page .selector,.home-page .results { border-radius:22px; padding:20px 18px; }
  .home-page .selector-heading { align-items:center; }
  .home-page .quick-pick,.home-page .related-pick { padding:8px 12px; }
  .home-page .cover-frame { height:280px; }
  .home-page .card-body { padding:13px 14px 15px; }
  .detail-page:not(.admin-preview) .detail-main { padding:0 18px; }
}