/*Thư Quán v0.4 — một stylesheet, tokens tập trung, không thư viện bên ngoài.*/
:root { color-scheme:light;--bg:#f7f5ef;--panel:#fffdfa;--panel-alt:#f1ede4;--ink:#242e2c;--muted:#63716b;--line:#deded5;--accent:#aa4b3c;--accent-contrast:#fffaf7;--jade:#245b53;--glow:rgba(44,85,76,.13);--shadow:0 16px 40px rgba(34,54,48,.07);--radius:15px;--reader-font:19px;--reader-line:1.9;--reader-width:720px;--font-ui:"Segoe UI","Inter","Noto Sans","PingFang SC","Microsoft YaHei UI","Malgun Gothic",sans-serif;--font-display:"Cambria","Noto Serif","Georgia","Noto Serif CJK SC","Source Han Serif SC",serif;--font-reading:"Segoe UI","Noto Sans","PingFang SC","Microsoft YaHei","Malgun Gothic",sans-serif;--font-reading-serif:"Cambria","Georgia","Noto Serif","Noto Serif CJK SC","Source Han Serif SC",serif; }
:root[data-theme="dark"] { color-scheme:dark;--bg:#101b1c;--panel:#1b2a2c;--panel-alt:#233437;--ink:#eff0e8;--muted:#bac9c2;--line:#38504e;--accent:#e4a177;--accent-contrast:#1b2524;--jade:#92c3b1;--glow:rgba(166,204,190,.12);--shadow:0 16px 44px rgba(0,0,0,.18) }
:root[data-theme="paper"] { color-scheme:light;--bg:#eee6d5;--panel:#f9f1df;--panel-alt:#eee3cd;--ink:#392f25;--muted:#7a6b56;--line:#d8cbb4;--accent:#91533b;--accent-contrast:#fffaf0;--jade:#527063;--glow:rgba(94,68,47,.08);--shadow:0 16px 40px rgba(84,65,42,.09) }
* { box-sizing:border-box }
html { scroll-behavior:smooth }
body { margin:0;background:var(--bg);color:var(--ink);font:15px/1.65 var(--font-ui);font-synthesis:none;-webkit-font-smoothing:antialiased }
a { color:inherit;text-decoration:none }
button,input { font:inherit }
button { cursor:pointer }
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible { outline:3px solid var(--accent);outline-offset:3px }
img { max-width:100%;display:block }
h1,h2,h3,p { margin-top:0 }
h1,h2,h3 { line-height:1.3 }
h2 { font-size:1.4rem }
h3 { font-size:1rem }
p { margin-bottom:0 }
.sr-only { position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }
.skip { position:absolute;left:-999px;top:10px;z-index:1000;background:var(--panel);padding:10px }
.skip:focus { left:10px }
.container { width:min(1320px,calc(100% - 48px));margin:auto }
.site-header { position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--panel) 92%,transparent);border-bottom:1px solid var(--line);backdrop-filter:blur(14px) }
.header-row { min-height:68px;display:flex;align-items:center;gap:26px }
.brand { display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:1.4rem;font-weight:800;letter-spacing:.03em }
.brand-mark { display:grid;place-items:center;color:#efe1c4;width:38px;height:38px;background:#204a44;border-radius:11px;font-family:serif;font-size:22px;box-shadow:inset 0 0 0 1px #e2c9906c }
.top-nav { display:flex;gap:22px;align-items:center;margin-left:auto;margin-right:0;font-weight:650;font-size:.92rem }
.top-nav a:hover,.text-link:hover { color:var(--accent) }
.nav-actions { display:flex;align-items:center;gap:13px }
.theme-menu { position:relative }
.theme-trigger { display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;background:var(--panel-alt);color:var(--ink);padding:7px 12px;font-size:.85rem;white-space:nowrap;cursor:pointer;list-style:none }
.theme-trigger::-webkit-details-marker { display:none }
.theme-trigger:hover { border-color:var(--jade) }
.theme-menu[open] .theme-trigger { border-color:var(--jade) }
.theme-pop { position:absolute;top:calc(100% + 12px);right:0;z-index:50;padding:6px;width:190px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:13px;box-shadow:0 16px 45px #0003 }
.theme-pop button { display:flex;align-items:center;width:100%;gap:8px;text-align:left;border:0;border-radius:8px;padding:9px 10px;background:transparent;color:var(--ink) }
.theme-pop button:hover,.theme-pop button:focus-visible { background:var(--panel-alt) }
.theme-pop button.is-selected { background:var(--panel-alt);font-weight:700 }
.theme-pop button.is-selected:after { content:"✓";margin-left:auto;color:var(--jade) }
.btn { border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:9px;padding:9px 15px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:.9rem;transition:transform .18s,border-color .18s,background .18s }
.btn:hover { transform:translateY(-2px);border-color:var(--jade) }
.btn-primary { background:var(--accent);color:var(--accent-contrast);border-color:var(--accent) }
.btn-primary:hover { filter:brightness(1.07);border-color:var(--accent) }
.small-mark { color:var(--accent);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase }
.main-column { min-width:0 }
.hero { position:relative;min-height:305px;display:flex;align-items:center;overflow:hidden;border-radius:var(--radius);isolation:isolate;background:#194b47;color:#fff9ed;box-shadow:var(--shadow) }
.hero-image { position:absolute;inset:0;background-image:linear-gradient(90deg,#0a2928e8 0%,#153e3bd9 37%,#122e2a1c 75%),image-set(url("hero-820.webp") 1x,url("hero-1560.webp") 2x);background-size:cover;background-position:center;z-index:-1 }
.hero-content { padding:30px 33px;max-width:510px }
.hero-content h1 { font-family:Georgia,"Times New Roman",serif;font-size:clamp(2rem,3.7vw,3.1rem);line-height:1.23;letter-spacing:.012em;margin:14px 0 }
.hero-content p { max-width:430px;color:#e2e8dc;line-height:1.75;margin-bottom:21px }
.hero .small-mark { color:#e7c78b }
.hero .btn-light { background:#f8ebcf;color:#273830;border-color:#f8ebcf }
.section { margin-bottom:32px }
.section-title { display:flex;align-items:baseline;gap:13px;flex-wrap:wrap;margin-bottom:12px }
.section-title h2 { margin:0;font-size:1.3rem }
.section-title small { font-size:.77rem;color:var(--muted);font-weight:400 }
.featured-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px }
.book-card { display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;min-width:0;transition:transform .19s,border-color .19s,box-shadow .19s }
.book-card:hover { transform:translateY(-3px);border-color:var(--jade);box-shadow:0 12px 30px var(--glow) }
.cover { position:relative;height:164px;overflow:hidden;background-color:#1e4d48;background-size:cover;background-position:center;isolation:isolate }
.cover:after { content:"";position:absolute;inset:0;background:linear-gradient(0deg,#092020ce,transparent 65%) }
.cover-text { position:absolute;bottom:13px;left:13px;right:10px;z-index:1;color:#fffaf1;font-family:Georgia,"Times New Roman",serif;font-size:1.2rem;font-weight:750;line-height:1.25;text-shadow:0 2px 10px #0007 }
.book-card:hover .cover { background-size:cover }
.book-body { padding:14px;flex:1;display:flex;flex-direction:column;gap:5px }
.book-body h3 { margin:0;font-size:.96rem;line-height:1.4 }
.book-body p { font-size:.79rem;line-height:1.55;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden }
.book-body .meta { font-size:.73rem;color:var(--muted) }
.book-body .pill { align-self:flex-start }
.pill { display:inline-flex;border:1px solid var(--line);background:var(--panel-alt);border-radius:999px;font-size:.72rem;padding:2px 8px;color:var(--muted) }
.rank-panel { position:static;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden }
.rank-head { padding:16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px }
.rank-head strong { font-size:1.01rem }
.rank-list { list-style:none;margin:0;padding:8px 14px }
.rank-list li a { display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line) }
.rank-list li:last-child a { border-bottom:0 }
.rank-number { font-size:1.06rem;font-weight:850;width:20px;color:var(--muted) }
.rank-list li:nth-child(-n/**/+3) .rank-number { color:var(--accent) }
.rank-book { min-width:0 }
.rank-book strong { display:block;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.rank-book small { font-size:.75rem;color:var(--muted) }
.notice { background:var(--panel-alt);border-radius:10px;padding:14px;color:var(--muted);margin:4px 14px 14px;font-size:.77rem }
.browse-box { background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:19px }
.browse-head { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;flex-wrap:wrap }
.browse-head h2 { margin:0 }
.search { display:flex;align-items:center;gap:8px;background:var(--panel-alt);border:1px solid var(--line);border-radius:9px;padding:8px 12px;min-width:210px }
.search:focus-within { border-color:var(--jade) }
.search input { border:0;outline:0;background:transparent;color:var(--ink);min-width:0;width:100%;font-size:.88rem }
.search input::placeholder { color:var(--muted) }
.filters-wrap { display:grid;gap:9px;margin-bottom:17px }
.filter-row { display:grid;grid-template-columns:75px minmax(0,1fr);gap:10px;align-items:start;border-bottom:1px dashed var(--line);padding-bottom:9px }
.filter-row label { font-size:.78rem;color:var(--muted);font-weight:750;padding-top:5px }
.filter-chips { display:flex;gap:6px;flex-wrap:wrap }
.chip { border:1px solid transparent;background:transparent;color:var(--muted);font-size:.78rem;border-radius:999px;padding:4px 10px;line-height:1.6 }
.chip:hover { background:var(--panel-alt);color:var(--ink) }
.chip.active { background:var(--jade);color:var(--bg);font-weight:750 }
.filter-hint { font-size:.77rem;color:var(--muted);padding:5px }
.results-row { display:flex;align-items:center;justify-content:space-between;margin:12px 0;font-size:.82rem;color:var(--muted) }
.text-button { background:transparent;border:0;color:var(--accent);font-size:.8rem;font-weight:700 }
.catalog-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px }
.catalog-grid .cover { height:158px }
.empty { padding:30px;text-align:center;color:var(--muted) }
.updates { display:grid;gap:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden }
.update-row { display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:10px;padding:11px 15px;border-bottom:1px solid var(--line);font-size:.84rem }
.update-row:last-child { border:0 }
.update-row small { color:var(--muted) }
.update-row:hover { background:var(--panel-alt) }
.footer { border-top:1px solid var(--line);background:var(--panel);margin-top:36px;padding:24px 0;color:var(--muted);font-size:.78rem }
.footer-inner { display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap }
.footer a:hover { color:var(--accent) }
/*Details*/
.breadcrumb { padding:21px 0;color:var(--muted);font-size:.83rem }
.breadcrumb a:hover { color:var(--accent) }
.detail-hero { display:grid;grid-template-columns:200px 1fr;gap:26px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px }
.detail-cover { height:290px;border-radius:11px }
.detail-cover .cover-text { font-size:1.5rem;bottom:24px;left:18px }
.detail-copy h1 { font-size:2rem;margin:8px 0 8px;font-family:Georgia,"Times New Roman",serif }
.detail-subtitle { color:var(--muted);margin-bottom:14px }
.detail-description { max-width:780px;line-height:1.85;margin:13px 0 19px }
.detail-meta { color:var(--muted);font-size:.85rem }
.detail-tags { display:flex;gap:7px;flex-wrap:wrap;margin:16px 0 }
.chapter-panel { background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-top:22px }
.chapter-list { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px }
.chapter-list a { border-bottom:1px solid var(--line);padding:9px;color:var(--ink) }
.chapter-list a:hover { color:var(--accent) }
/*Reader*/
.reader-page { background:var(--bg) }
.reader-head { display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 0;color:var(--muted);font-size:.86rem }
.reader-head .brand { font-size:1.05rem }
.reader-main { width:min(calc(100% - 34px),var(--reader-width));margin:0 auto;padding:36px 0 60px }
.reader-title { text-align:center;margin-bottom:38px }
.reader-title h1 { font-size:clamp(1.6rem,4vw,2.05rem);font-weight:750 }
.reader-title p { color:var(--muted);font-size:.85rem }
.reader-content { font-size:var(--reader-font);line-height:var(--reader-line);font-weight:400;font-kerning:normal;letter-spacing:normal;overflow-wrap:break-word }
.reader-content p { text-indent:2em;margin:0 0 1.2em;overflow-wrap:break-word }
.reader-tools { display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap;margin-top:40px;padding:20px 0;border-top:1px solid var(--line) }
.reader-panel { background:var(--panel);border:1px solid var(--line);border-radius:11px;margin:16px 0 24px }
.reader-panel>summary { padding:13px 17px;cursor:pointer;font-weight:750 }
.reader-settings { display:grid;grid-template-columns:1.2fr repeat(3,minmax(0,1fr));gap:15px;padding:0 17px 17px }
.reader-settings label { font-size:.81rem;color:var(--muted);display:grid;gap:5px }
.reader-settings input { width:100%;accent-color:var(--jade) }
.reader-nav { display:flex;align-items:center;justify-content:space-between;gap:10px }
.reader-nav a { color:var(--accent) }
.admin-layout { max-width:920px;margin:24px auto;padding:23px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius) }
.admin-layout h1 { font-size:1.65rem }
.admin-layout input { padding:12px;border:1px solid var(--line);border-radius:9px;max-width:100%;background:var(--panel-alt);color:var(--ink) }
.admin-output { margin-top:18px;color:var(--muted) }
.admin-output ol { padding-left:24px }
@media(min-width:1380px) {
  .container { width:min(1390px,calc(100% - 64px)) }
}
@media(max-width:1100px) {
  .featured-grid,.catalog-grid { grid-template-columns:repeat(3,minmax(0,1fr)) }
}
@media(max-width:800px) {
  .container { width:min(100% - 28px,680px) }
  .header-row { gap:12px;min-height:61px }
  .brand { font-size:1.17rem }
  .brand-mark { height:33px;width:33px }
  .nav-actions { margin-left:auto }
  .theme-trigger { font-size:.78rem;padding:6px 9px }
  .hero { min-height:278px }
  .hero-content { padding:26px 21px }
  .hero-content h1 { font-size:2.15rem }
  .featured-grid,.catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .detail-hero { grid-template-columns:120px minmax(0,1fr);padding:15px;gap:15px }
  .detail-cover { height:180px }
  .detail-cover .cover-text { font-size:1.1rem }
  .detail-copy h1 { font-size:1.4rem }
  .detail-description { font-size:.85rem }
  .reader-settings { grid-template-columns:1fr }
  .update-row { grid-template-columns:1fr auto }
  .update-row small { display:none }
}
@media(max-width:480px) {
  .hero { min-height:265px }
  .hero-content h1 { font-size:1.86rem }
  .hero-content p { font-size:.84rem }
  .hero-image { background-position:61% center }
  .featured-grid,.catalog-grid { gap:9px }
  .cover,.catalog-grid .cover { height:145px }
  .cover-text { font-size:1.03rem }
  .book-body { padding:10px }
  .book-body p { display:none }
  .book-body h3 { font-size:.87rem }
  .browse-box { padding:13px }
  .browse-head { display:block }
  .browse-head .search { margin-top:10px;width:100% }
  .filter-row { display:block }
  .filter-row label { display:block;margin-bottom:4px }
  .filter-chips { max-height:93px;overflow:auto }
  .detail-hero { grid-template-columns:100px 1fr }
  .detail-cover { height:160px }
  .detail-copy h1 { font-size:1.2rem }
  .detail-tags { margin:9px 0 }
  .detail-copy .btn { padding:7px 9px }
  .chapter-list { grid-template-columns:1fr }
  .reader-main { padding:18px 0 44px }
  .reader-head { flex-wrap:wrap }
  .reader-title h1 { font-size:1.55rem }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after { scroll-behavior:auto!important;animation:none!important;transition:none!important }
}

/* ================================================================
   V0.5 DESIGN SYSTEM / TYPOGRAPHY: edit font families here only.
   No external webfonts, no font preloads, no blocking requests.
   ================================================================ */
button, input, select, textarea { font-family:inherit; }
h1, h2, h3 { overflow-wrap:break-word; }
.brand, .hero-content h1, .cover-text, .detail-copy h1 { font-family:var(--font-display); }
/* CJK: choose script-specific locally installed fonts rather than SC-first fallback. */
.reader-content, .type-sample p { font-family:var(--font-reading); line-break:auto; word-break:normal; }
.reader-content:lang(zh-Hans), .reader-content :lang(zh-Hans), .type-sample:lang(zh-Hans) p {
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC",sans-serif;
}
.reader-content:lang(zh-Hant), .reader-content :lang(zh-Hant), .type-sample:lang(zh-Hant) p {
  font-family:"PingFang TC","Microsoft JhengHei","Noto Sans CJK TC","Source Han Sans TC",sans-serif;
}
.reader-content:lang(ko), .reader-content :lang(ko), .type-sample:lang(ko) p {
  font-family:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans CJK KR","Noto Sans KR",sans-serif;
}
.reader-main[data-font-style="serif"] .reader-content { font-family:var(--font-reading-serif); }
.reader-main[data-font-style="serif"] .reader-content:lang(zh-Hans),
.reader-main[data-font-style="serif"] .reader-content :lang(zh-Hans) {
  font-family:"Songti SC","SimSun","Noto Serif CJK SC","Source Han Serif SC",serif;
}
.reader-main[data-font-style="serif"] .reader-content:lang(zh-Hant),
.reader-main[data-font-style="serif"] .reader-content :lang(zh-Hant) {
  font-family:"Songti TC","PMingLiU","Noto Serif CJK TC",serif;
}
.reader-main[data-font-style="serif"] .reader-content:lang(ko),
.reader-main[data-font-style="serif"] .reader-content :lang(ko) {
  font-family:"AppleMyungjo","Batang","Noto Serif CJK KR",serif;
}
.reader-title h1 { font-family:var(--font-ui); font-weight:700; }

/* ================================================================
   Navigation: one global route to discover; always available mobile.
   ================================================================ */
.header-row { justify-content:space-between; }
.nav-actions { flex-shrink:0; }
.home-layout { display:grid; grid-template-columns:minmax(0,1fr) 256px; gap:22px; padding-top:22px; align-items:start; }
.home-layout .section { margin-top:28px; }
.catalog-page { margin-bottom:22px; }
.catalog-intro { color:var(--muted); font-size:.9rem; }
.catalog-page h1 { font-size:1.65rem; margin:4px 0; }
.filter-label { font-size:.79rem;color:var(--muted);font-weight:700;padding-top:5px; }
.taxonomy-reference { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); margin:26px 0; }
.taxonomy-reference > summary { cursor:pointer; padding:19px 21px; font-weight:700; }
.taxonomy-reference-content { border-top:1px solid var(--line); padding:16px 24px 26px; }
.taxonomy-reference-content > p { color:var(--muted); margin-bottom:20px; }
.taxonomy-reference-content section { margin-top:26px; }
.taxonomy-reference-content h3 { margin-bottom:9px; }
.taxonomy-entry { padding:12px 0; border-bottom:1px solid var(--line); scroll-margin-top:125px; }
.taxonomy-entry p { font-size:.86rem; color:var(--muted); margin-top:5px; line-height:1.7; }
.taxonomy-entry small { font-weight:400; color:var(--muted); }
.font-choice { display:flex; flex-wrap:wrap; gap:12px; border:0; padding:0; min-width:0; }
.font-choice legend { font-size:.81rem;color:var(--muted);font-weight:700; margin-bottom:5px; }
.reader-settings .font-choice label { display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.reader-settings .font-choice input { width:auto; }
.typography-page { max-width:1070px; padding-bottom:42px; }
.typography-page > p { max-width:760px; color:var(--muted); margin:14px 0 22px; }
.type-sample-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; margin:16px 0 25px; }
.type-sample { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:22px; }
.type-sample h2 { font-family:var(--font-ui); font-size:1rem; margin-bottom:10px; }
.type-sample p { font-size:1.15rem; line-height:1.85; letter-spacing:normal; }
.type-sample small { color:var(--muted); font-size:.75rem; }
@media(max-width:1100px) {
  .home-layout { grid-template-columns:minmax(0,1fr) 238px; }
}
@media(max-width:800px) {
  .header-row { flex-wrap:wrap; gap:8px 12px; padding:8px 0; }
  .top-nav { display:flex; order:3; width:100%; justify-content:center; gap:0; border-top:1px solid var(--line); padding-top:5px; }
  .top-nav a { padding:5px 15px; font-size:.86rem; }
  .home-layout { display:flex; flex-direction:column; padding-top:13px; }
  .main-column, .rank-panel { width:100%; }
  .type-sample-grid { grid-template-columns:1fr; }
}
@media(max-width:480px) {
  .top-nav a { flex:1; text-align:center; }
  .type-sample { padding:17px; }
  .update-row { grid-template-columns:minmax(0,1fr) auto; }
  .catalog-page h1 { font-size:1.45rem; }
}

/* ================================================================
   V0.5 catalog — Qidian-style progressive category hierarchy.
   One place for category navigation, one place for search and facets.
   ================================================================ */
.catalog-container { padding-bottom:36px; }
.discover-heading { display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:18px; }
.discover-heading h1 { font-size:clamp(1.55rem,2.3vw,2.05rem);margin:2px 0 4px;font-family:var(--font-display); }
.discover-heading p { color:var(--muted);font-size:.88rem; }
.discover-search { width:min(100%,400px); min-height:44px;flex-shrink:0; }
.discover-layout { display:grid;grid-template-columns:218px minmax(0,1fr);align-items:start;gap:19px; }
.category-sidebar,.catalog-main { background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);min-width:0; }
.category-sidebar { overflow:hidden;position:sticky;top:86px; }
.category-sidebar-head { padding:14px 17px 10px; }
.category-sidebar-head h2 { font-size:1.01rem;margin:0; }
.channel-switch { display:flex;gap:3px;padding:4px;margin:0 11px 8px;border:1px solid var(--line);border-radius:10px;background:var(--panel-alt); }
.channel-btn { flex:1;border:0;padding:7px 1px;border-radius:7px;background:transparent;color:var(--muted);font-size:.74rem;font-weight:650;white-space:nowrap; }
.channel-btn:hover { color:var(--ink); }
.channel-btn.active { background:var(--panel);color:var(--accent);box-shadow:0 1px 5px #0001; }
.category-options { display:grid;gap:1px;padding:0 8px 10px; }
.category-btn { width:100%;border:0;border-left:3px solid transparent;background:transparent;color:var(--ink);padding:7px 12px;text-align:left;line-height:1.5;border-radius:6px;font-size:.85rem; }
.category-btn:hover { background:var(--panel-alt); }
.category-btn.active { background:var(--panel-alt);border-left-color:var(--accent);font-weight:750;color:var(--accent); }
.sidebar-note { border-top:1px solid var(--line);padding:10px 16px;font-size:.75rem;color:var(--muted); }
.catalog-main { padding:20px; }
.subcategory-block { border-bottom:1px solid var(--line);padding-bottom:15px;margin-bottom:14px; }
.subcategory-heading { display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px; }
.subcategory-heading strong { font-size:.96rem; }
.subgenre-options,.quick-filter-options,.tag-options { display:flex;gap:6px;flex-wrap:wrap; }
.sub-btn { border:1px solid var(--line);background:transparent;border-radius:8px;color:var(--ink);padding:6px 12px;font-size:.81rem; }
.sub-btn:hover { border-color:var(--jade);background:var(--panel-alt); }
.sub-btn.active { color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--panel));font-weight:750; }
.quick-filter-row { display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;padding-bottom:12px; }
.filter-caption { white-space:nowrap;font-size:.8rem;font-weight:750;color:var(--muted); }
.advanced-filter { border:1px solid var(--line);border-radius:10px;margin-bottom:14px; }
.advanced-filter > summary { display:flex;gap:8px;align-items:center;list-style:none;cursor:pointer;padding:10px 14px;font-weight:700;font-size:.83rem; }
.advanced-filter > summary::-webkit-details-marker { display:none; }
.advanced-filter > summary:hover { color:var(--accent); }
.advanced-arrow { margin-left:auto;color:var(--muted);transition:transform .16s; }
.advanced-filter[open] .advanced-arrow { transform:rotate(180deg); }
.advanced-count { border-radius:99px;background:var(--jade);padding:0 7px;color:var(--bg);font-size:.72rem; }
.advanced-inner { padding:15px;border-top:1px solid var(--line);display:grid;gap:20px; }
.filter-section { display:grid;gap:10px; }
.filter-section > strong { font-size:.82rem; }
.filter-section-heading { display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap; }
.filter-section-heading strong { font-size:.82rem; }
.filter-section-heading span { font-size:.75rem;color:var(--muted); }
.tag-search { display:flex;align-items:center;gap:8px;max-width:300px;border:1px solid var(--line);border-radius:8px;padding:7px 10px;background:var(--panel-alt); }
.tag-search input { width:100%;border:0;outline:0;background:transparent;color:var(--ink);font-size:.83rem; }
.active-criteria { display:flex;gap:5px;flex-wrap:wrap;margin-top:5px; }
.criterion-chip { border:1px solid var(--line);border-radius:7px;background:var(--panel-alt);color:var(--ink);font-size:.74rem;padding:3px 8px; }
.criterion-chip:hover { border-color:var(--accent); }
.catalog-main .results-row { border-top:1px solid var(--line);margin:13px 0;padding:13px 0 0;min-height:42px; }
.catalog-main .catalog-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.catalog-main .catalog-grid [hidden] { display:none!important; }
.catalog-footnote { font-size:.75rem;color:var(--muted);margin-top:20px;line-height:1.6; }
@media(max-width:1050px) {
  .discover-layout { grid-template-columns:185px minmax(0,1fr);gap:11px; }
  .catalog-main { padding:14px; }
  .catalog-main .catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:760px) {
  .discover-heading { display:grid;gap:14px; }
  .discover-search { width:100%; }
  .discover-layout { display:block; }
  .category-sidebar { position:static;margin-bottom:12px; }
  .category-sidebar-head,.sidebar-note { display:none; }
  .channel-switch { max-width:330px;margin:9px 10px; }
  .category-options { display:flex;gap:4px;overflow-x:auto;overscroll-behavior-inline:contain;padding:0 10px 10px;scrollbar-width:thin; }
  .category-btn { flex-shrink:0;width:auto;border-left:0;border-bottom:2px solid transparent;padding:7px 10px;white-space:nowrap; }
  .category-btn.active { border-bottom-color:var(--accent); }
  .catalog-main { padding:14px; }
  .catalog-main .catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .subgenre-options { max-height:148px;overflow-y:auto; }
  .catalog-main .results-row { align-items:flex-start;gap:12px; }
}
@media(max-width:430px) {
  .catalog-main { padding:10px; }
  .catalog-main .catalog-grid { gap:9px; }
  .subgenre-options { max-height:155px; }
  .sub-btn { padding:6px 9px; }
  .tag-options { max-height:170px;overflow:auto; }
  .discover-heading p { font-size:.82rem; }
}