/* roulang page: index */
:root{
  --bg:#F7F4EC;
  --surface:#FFFFFF;
  --ink:#1B1A17;
  --muted:#6F6B60;
  --line:#E5DFD2;
  --accent:#F6A700;
  --accent-ink:#1B1A17;
  --dark-bg:#161512;
  --dark-text:#F7F4EC;
  --green:#2E9E6B;
  --red:#D6453D;
  --radius-sm:4px;
  --radius:8px;
  --radius-pill:999px;
  --shadow-card:0 2px 8px rgba(22,21,18,0.04);
  --shadow-lift:0 12px 30px rgba(22,21,18,0.08);
  --shadow-strong:0 16px 32px rgba(22,21,18,0.10);
  --font:-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  --spacer:100px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:1rem;line-height:1.75;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.3;color:var(--ink);margin:0 0 .5em}
a{color:inherit;text-decoration:none}
a:hover{color:inherit}
ul,ol{list-style:none;margin:0;padding:0}
img{display:block;max-width:100%}
p{margin:0 0 1rem}
::selection{background:var(--accent);color:var(--ink)}
a:focus-visible,button:focus-visible,input:focus-visible,.accordion-button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.container-xxl{max-width:1320px;padding-left:32px;padding-right:32px}
.section{padding:var(--spacer) 0}
.section-secondary{background:var(--surface)}
.section-border{border-top:1px solid var(--line)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--muted);font-size:.9rem;letter-spacing:.16em;font-weight:600;text-transform:uppercase}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--accent)}
.btn{border-radius:var(--radius);padding:12px 24px;font-weight:700;font-size:.95rem;transition:background .25s ease,border-color .25s ease,color .25s ease,transform .2s ease,box-shadow .25s ease;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-ink{background:var(--ink);border:1px solid var(--ink);color:var(--surface)}
.btn-ink:hover,.btn-ink:focus{background:var(--accent);border-color:var(--ink);color:var(--accent-ink);transform:translateY(-1px)}
.btn-ghost{background:transparent;border:1.5px solid var(--ink);color:var(--ink)}
.btn-ghost:hover,.btn-ghost:focus{background:var(--ink);color:var(--surface)}
.btn-accent{background:var(--accent);border:1px solid var(--accent);color:var(--accent-ink)}
.btn-accent:hover,.btn-accent:focus{background:#FFC23D;border-color:var(--ink);transform:translateY(-1px)}
.btn-light-outline{background:transparent;border:1.5px solid rgba(247,244,236,.65);color:var(--dark-text)}
.btn-light-outline:hover,.btn-light-outline:focus{background:var(--dark-text);color:var(--ink);border-color:var(--dark-text)}
.site-header{position:sticky;top:0;z-index:1040;background:rgba(247,244,236,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.site-header .navbar{padding:14px 0}
.toolbar-nav{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:nowrap}
.site-brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;line-height:1;font-size:1.3rem;letter-spacing:-.02em;white-space:nowrap;border-radius:8px}
.brand-bubble{position:relative;background:var(--accent);color:var(--ink);font-size:1.1rem;font-weight:900;letter-spacing:-.04em;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:5px;box-shadow:inset 0 -2px 0 rgba(22,21,18,.18)}
.brand-bubble::after{content:"";position:absolute;left:-7px;bottom:2px;width:10px;height:10px;background:var(--accent);border-radius:2px;transform:rotate(45deg);z-index:-1}
.brand-name{color:var(--ink)}
.main-nav{gap:4px}
.main-nav .nav-link{color:var(--muted);font-weight:600;padding:10px 16px;border-radius:var(--radius-sm);position:relative;white-space:nowrap}
.main-nav .nav-link:hover{color:var(--ink);background:rgba(229,223,210,.55)}
.main-nav .nav-link.active{color:var(--ink)}
.main-nav .nav-link.active::after{content:"";position:absolute;left:16px;right:16px;bottom:0;height:2px;background:var(--accent);border-radius:2px}
.toolbar-right{margin-left:auto;display:flex;align-items:center;gap:12px;flex-shrink:0}
.status-item{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:.85rem;font-weight:600;white-space:nowrap}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(46,158,107,.15)}
.notify-btn{width:38px;height:38px;border:1px solid var(--line);background:var(--surface);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);position:relative;transition:border-color .2s,background .2s}
.notify-btn:hover{background:#fff;border-color:#C7BCAA}
.notify-badge{position:absolute;top:-4px;right:-3px;min-width:18px;height:18px;padding:0 4px;background:var(--red);color:#fff;font-size:.7rem;font-weight:700;border-radius:999px;display:flex;align-items:center;justify-content:center}
.btn-toolbar{min-height:40px;padding:8px 20px;font-size:.9rem}
.navbar-toggler{width:42px;height:42px;border:1px solid var(--line);border-radius:8px;background:var(--surface);display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0}
.navbar-toggler span{display:block;width:18px;height:2px;background:var(--ink);border-radius:4px}
.navbar-toggler:focus{box-shadow:none;outline:2px solid var(--ink)}
.category-page-head{padding-top:96px;position:relative;overflow:hidden}
.category-page-head::before{content:"";position:absolute;top:-8%;right:-2%;width:300px;height:300px;background:url('/assets/images/backpic/back-3.jpg') center/cover no-repeat;opacity:.06;transform:rotate(12deg);border-radius:8px}
.breadcrumb-wrap{padding:22px 0;border-bottom:1px solid var(--line);background:var(--bg)}
.breadcrumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.9rem;color:var(--muted);margin:0}
.breadcrumb a{color:var(--muted);font-weight:600}
.breadcrumb a:hover{color:var(--ink)}
.breadcrumb .sep{color:#B8AE9C}
.page-title-row{display:flex;align-items:flex-end;gap:28px;justify-content:space-between;padding-bottom:28px}
.page-title-main span{display:inline-flex;align-items:center;gap:10px;color:var(--muted);font-size:.85rem;font-weight:600;letter-spacing:.08em;margin-bottom:18px}
.page-title-main h1{font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.25;font-weight:800;letter-spacing:-.02em;margin:0}
.page-title-main h1 em{font-style:normal;color:var(--ink);background:linear-gradient(transparent 60%,rgba(246,167,0,.55) 60%);padding:0 4px}
.page-title-sub{max-width:560px;color:var(--muted);margin-top:18px;font-size:1.02rem}
.filter-sticky-wrap{position:sticky;top:70px;z-index:20;background:rgba(247,244,236,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:16px 0}
.filter-title{font-size:.84rem;color:var(--muted);font-weight:600;letter-spacing:.12em;margin-bottom:8px}
.chip-list{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.chip{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;padding:8px 18px;background:var(--surface);color:var(--muted);font-size:.88rem;font-weight:600;line-height:1.4;cursor:pointer;transition:border-color .2s,background .2s,color .2s,transform .2s}
.chip:hover{border-color:var(--ink);background:var(--ink);color:var(--surface);transform:translateY(-1px)}
.chip.is-active{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.genre-section{padding-top:64px}
.genre-row{display:flex;align-items:stretch;gap:34px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:28px;margin-bottom:28px;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;scroll-margin-top:160px}
.genre-row:hover{transform:translateY(-2px);border-color:var(--ink);box-shadow:var(--shadow-strong)}
.genre-thumb{flex:0 0 188px;border-radius:6px;overflow:hidden;border:1px solid var(--line);background:#E5DFD2;aspect-ratio:3/4;position:relative}
.genre-thumb img{width:100%;height:100%;object-fit:cover}
.genre-row .genre-body{flex:1;min-width:0}
.genre-index{color:#B0A68F;font-size:.85rem;font-weight:700;letter-spacing:.2em;display:block;margin-bottom:6px}
.genre-body h3{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;margin-bottom:6px}
.genre-desc{color:var(--muted);font-size:1rem;line-height:1.85;margin-bottom:8px}
.genre-tag-list{display:flex;flex-wrap:wrap;gap:12px;margin:14px 0 18px;padding-top:14px;border-top:1px solid var(--line)}
.genre-tag-item{display:inline-flex;flex-direction:column;gap:2px;font-size:.82rem;color:var(--muted)}
.genre-tag-item b{color:var(--ink);font-size:.98rem;font-weight:700}
.genre-action{margin-top:auto}
.genre-action .btn{padding:10px 20px;min-height:40px;font-size:.9rem}
.editor-section{padding:72px 0}
.editor-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px;flex-wrap:wrap}
.editor-head h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:0}
.editor-track .row{gap:0}
.editor-card{height:100%}
.editor-card .card-body{background:var(--surface);border:1px solid var(--line);border-top:0;border-radius:0 0 8px 8px;padding:14px 16px}
.editor-media{aspect-ratio:3/4;overflow:hidden;border-radius:8px 8px 0 0}
.editor-media img{width:100%;height:100%;object-fit:cover}
.editor-card:hover .editor-media img{transform:scale(1.04)}
.editor-card .card-title{font-size:1rem;font-weight:800;margin:0}
.editor-card .card-text{font-size:.82rem;color:var(--muted);margin-top:6px}
.faq-accordion .accordion-item{border:1px solid var(--line);border-radius:6px;margin-bottom:14px;overflow:hidden;background:var(--surface)}
.faq-accordion .accordion-item:first-of-type,.faq-accordion .accordion-item:last-of-type{border-radius:6px}
.faq-accordion .accordion-button{background:var(--surface);color:var(--ink);font-size:1.02rem;font-weight:700;padding:18px 22px;box-shadow:none}
.faq-accordion .accordion-button::after{background-image:none;content:"＋";font-weight:400;font-size:1.2rem;width:auto;height:auto;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:transform .2s}
.faq-accordion .accordion-button:not(.collapsed){background:var(--surface);color:var(--ink)}
.faq-accordion .accordion-button:not(.collapsed)::after{content:"－";transform:none}
.faq-accordion .accordion-button:focus{box-shadow:none;border-color:transparent;outline:none}
.faq-accordion .accordion-button:focus-visible{outline:2px solid var(--ink)}
.faq-accordion .accordion-body{color:var(--muted);padding:4px 22px 22px;font-size:.96rem}
.cta-band{background:var(--dark-bg);color:var(--dark-text);border-radius:var(--radius);padding:70px 44px;text-align:center;position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;left:-80px;bottom:-80px;width:240px;height:240px;border:2px dashed rgba(246,167,0,.25);border-radius:50%}
.cta-band h2{color:var(--dark-text);font-size:clamp(1.8rem,3.8vw,2.6rem);font-weight:800}
.cta-band p{color:rgba(247,244,236,.72);max-width:650px;margin:10px auto 30px}
.site-footer{background:var(--dark-bg);color:rgba(247,244,236,.74);padding:72px 0 30px;margin-top:96px}
.footer-brand{display:flex;align-items:center;gap:10px;font-size:1.3rem;font-weight:800;color:var(--dark-text);margin-bottom:18px}
.footer-brand .brand-bubble{background:var(--accent);color:var(--ink)}
.footer-desc{max-width:340px;font-size:.92rem;line-height:1.9;color:rgba(247,244,236,.68);margin-bottom:24px}
.footer-col h4{color:var(--dark-text);font-size:1rem;font-weight:700;margin-bottom:18px}
.footer-col ul li{margin-bottom:10px}
.footer-col ul a,.footer-col a{color:rgba(247,244,236,.68);font-size:.92rem;transition:color .2s,padding-left .2s}
.footer-col ul a:hover{color:var(--accent);padding-left:4px}
.footer-divider{border-color:rgba(247,244,236,.14);margin:44px 0 26px}
.footer-bottom{color:rgba(247,244,236,.5);font-size:.85rem;text-align:center}
@media (max-width:991.98px){
  :root{--spacer:72px}
  .main-nav .nav-link{padding:10px 12px;font-size:.9rem}
  .genre-row{flex-wrap:wrap}
  .genre-thumb{flex-basis:150px;flex-grow:0}
  .genre-body{flex:1 1 auto;width:calc(100% - 190px)}
  .category-page-head{padding-top:64px}
  .page-title-row{flex-direction:column;align-items:flex-start;gap:12px}
  .editor-card{margin-bottom:24px}
}
@media (max-width:767.98px){
  .container-xxl{padding-left:16px;padding-right:16px}
  .section{padding:56px 0}
  .category-page-head{padding-top:56px}
  .genre-section{padding-top:44px}
  .genre-row{padding:20px;gap:16px;margin-bottom:20px}
  .genre-thumb{flex-basis:92px;width:92px}
  .genre-body{width:calc(100% - 108px)}
  .genre-body h3{font-size:1.25rem}
  .genre-tag-list{gap:10px;flex-direction:column;align-items:flex-start}
  .genre-tag-item{flex-direction:row;gap:8px;align-items:baseline}
  .filter-sticky-wrap{top:62px;padding:14px 0}
  .chip{padding:7px 14px}
  .site-footer{padding-top:56px}
  .footer-col{margin-bottom:32px}
  .cta-band{padding:48px 22px}
}
@media (max-width:575.98px){
  .page-title-main h1{font-size:1.8rem}
  .editor-media{aspect-ratio:4/3}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* roulang page: category1 */
:root {
            --bg: #F7F4EC;
            --surface: #FFFFFF;
            --ink: #1B1A17;
            --muted: #6F6B60;
            --line: #E5DFD2;
            --accent: #F6A700;
            --accent-ink: #1B1A17;
            --dark-bg: #161512;
            --dark-text: #F7F4EC;
            --green: #2E9E6B;
            --red: #D6453D;
            --radius-sm: 4px;
            --radius: 8px;
            --radius-pill: 999px;
            --shadow-card: 0 2px 8px rgba(22, 21, 18, 0.04);
            --shadow-lift: 0 12px 30px rgba(22, 21, 18, 0.08);
            --shadow-strong: 0 16px 32px rgba(22, 21, 18, 0.10);
            --font: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
            --spacer: 100px;
        }
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        html {
            scroll-behavior: smooth;
        }
        body {
            font-family: var(--font);
            background: var(--bg);
            color: var(--ink);
            line-height: 1.75;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }
        a {
            color: inherit;
            text-decoration: none;
            transition: color .2s ease;
        }
        a:hover {
            color: var(--ink);
        }
        img {
            display: block;
            max-width: 100%;
        }
        ul,
        ol {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        button {
            background: none;
            border: none;
            font-family: inherit;
        }
        a:focus-visible,
        button:focus-visible,
        input:focus-visible,
        .accordion-button:focus-visible {
            outline: 2px solid var(--ink);
            outline-offset: 2px;
        }
        .container-xxl {
            max-width: 1320px;
            padding-left: 32px;
            padding-right: 32px;
        }
        .section {
            padding: var(--spacer) 0;
        }
        .section-secondary {
            background: var(--surface);
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
        }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: var(--muted);
            font-size: .9rem;
            letter-spacing: .16em;
            font-weight: 600;
            text-transform: uppercase;
        }
        .eyebrow::before {
            content: "";
            width: 28px;
            height: 2px;
            background: var(--accent);
        }
        .btn {
            border-radius: var(--radius);
            padding: 12px 24px;
            font-weight: 700;
            font-size: .95rem;
            transition: background .25s ease, border-color .25s ease, color .25s ease, transform .2s ease;
            min-height: 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border: 1px solid transparent;
        }
        .btn-ink {
            background: var(--ink);
            border-color: var(--ink);
            color: var(--surface);
        }
        .btn-ink:hover {
            background: var(--accent);
            border-color: var(--ink);
            color: var(--accent-ink);
            transform: translateY(-1px);
        }
        .btn-ghost {
            background: transparent;
            border-color: var(--ink);
            border-width: 1.5px;
            color: var(--ink);
        }
        .btn-ghost:hover {
            background: var(--ink);
            color: var(--surface);
        }
        .btn-accent {
            background: var(--accent);
            border-color: var(--accent);
            color: var(--accent-ink);
        }
        .btn-accent:hover {
            background: #FFC23D;
            border-color: var(--ink);
            transform: translateY(-1px);
        }
        .btn-light-outline {
            background: transparent;
            border: 1.5px solid rgba(247, 244, 236, .65);
            color: var(--dark-text);
        }
        .btn-light-outline:hover {
            background: var(--dark-text);
            color: var(--ink);
            border-color: var(--dark-text);
        }
        /* 导航 */
        .site-header {
            position: sticky;
            top: 0;
            z-index: 1040;
            background: rgba(247, 244, 236, .92);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--line);
        }
        .site-header .navbar {
            padding: 14px 0;
        }
        .toolbar-nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            flex-wrap: nowrap;
        }
        .site-brand {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-weight: 800;
            line-height: 1;
            font-size: 1.3rem;
            letter-spacing: -.02em;
            white-space: nowrap;
        }
        .site-brand .brand-bubble {
            position: relative;
            background: var(--accent);
            color: var(--ink);
            font-size: 1rem;
            font-weight: 900;
            width: 38px;
            height: 38px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 5px;
            box-shadow: inset 0 -2px 0 rgba(22, 21, 18, .18);
            z-index: 0;
        }
        .site-brand .brand-bubble::after {
            content: "";
            position: absolute;
            left: -7px;
            bottom: 2px;
            width: 10px;
            height: 10px;
            background: var(--accent);
            border-radius: 2px;
            transform: rotate(45deg);
            z-index: -1;
        }
        .brand-name {
            font-size: 1.25rem;
        }
        .main-nav {
            gap: 4px;
        }
        .main-nav .nav-link {
            color: var(--muted);
            font-weight: 600;
            padding: 10px 16px;
            border-radius: var(--radius-sm);
            position: relative;
            white-space: nowrap;
            font-size: .93rem;
        }
        .main-nav .nav-link:hover {
            color: var(--ink);
            background: rgba(229, 223, 210, .55);
        }
        .main-nav .nav-link.active {
            color: var(--ink);
        }
        .main-nav .nav-link.active::after {
            content: "";
            position: absolute;
            left: 16px;
            right: 16px;
            bottom: 0;
            height: 2px;
            background: var(--accent);
            border-radius: 2px;
        }
        .toolbar-right {
            display: flex;
            align-items: center;
            gap: 18px;
        }
        .status-item {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--muted);
            font-size: .82rem;
            font-weight: 600;
            white-space: nowrap;
        }
        .status-dot {
            width: 8px;
            height: 8px;
            background: var(--green);
            border-radius: 50%;
            display: inline-flex;
        }
        .notify-btn {
            width: 38px;
            height: 38px;
            border: 1px solid var(--line);
            background: var(--surface);
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--ink);
            position: relative;
            transition: border-color .2s, background .2s;
        }
        .notify-btn:hover {
            background: #fff;
            border-color: #C7BCAA;
        }
        .notify-badge {
            position: absolute;
            top: -4px;
            right: -3px;
            min-width: 18px;
            height: 18px;
            padding: 0 4px;
            background: var(--red);
            color: #fff;
            font-size: .7rem;
            font-weight: 700;
            border-radius: 999px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .btn-toolbar {
            min-height: 40px;
            padding: 8px 20px;
            font-size: .9rem;
        }
        .navbar-toggler {
            width: 42px;
            height: 42px;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: var(--surface);
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            padding: 0;
        }
        .navbar-toggler span {
            display: block;
            width: 18px;
            height: 2px;
            background: var(--ink);
            border-radius: 4px;
        }
        .navbar-toggler:focus {
            box-shadow: none;
            outline: 2px solid var(--ink);
        }
        /* 页头 */
        .category-hero {
            padding: 72px 0 44px;
            border-bottom: 1px solid var(--line);
        }
        .breadcrumb-line {
            font-size: .84rem;
            color: var(--muted);
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
            margin-bottom: 44px;
        }
        .breadcrumb-line a {
            color: var(--muted);
            font-weight: 600;
            transition: color .2s;
        }
        .breadcrumb-line a:hover {
            color: var(--ink);
        }
        .breadcrumb-line span {
            color: #B6AE9E;
        }
        .category-page-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            gap: 40px;
            position: relative;
        }
        .category-page-title .label-num {
            display: flex;
            align-items: center;
            gap: 12px;
            color: var(--muted);
            font-size: .84rem;
            font-weight: 700;
            letter-spacing: .21em;
            margin-bottom: 20px;
        }
        .category-page-title .label-num::before {
            content: "";
            width: 36px;
            height: 3px;
            background: var(--accent);
            display: inline-block;
        }
        .category-page-title h1 {
            font-size: clamp(2rem, 4.8vw, 3.4rem);
            line-height: 1.18;
            font-weight: 800;
            letter-spacing: -.02em;
            max-width: 760px;
            margin-bottom: 18px;
        }
        .category-page-title h1 .accent-block {
            background: linear-gradient(transparent 64%, rgba(246, 167, 0, .6) 64%);
            padding: 0 4px;
        }
        .category-page-title p {
            color: var(--muted);
            font-size: 1rem;
            max-width: 640px;
            line-height: 1.85;
            margin-bottom: 0;
        }
        .category-page-meta {
            text-align: right;
            flex-shrink: 0;
            padding-bottom: 8px;
            border-right: 3px solid var(--accent);
            padding-right: 22px;
        }
        .category-page-meta .amount {
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 800;
            letter-spacing: -.03em;
            line-height: 1.2;
        }
        .category-page-meta .amount-label {
            color: var(--muted);
            font-size: .85rem;
            font-weight: 600;
            letter-spacing: .1em;
        }
        /* 标签组 */
        .tag-filter-wrap {
            padding: 34px 0 22px;
            background: var(--surface);
            border-bottom: 1px solid var(--line);
        }
        .filter-row {
            display: flex;
            align-items: center;
            gap: 22px;
            flex-wrap: wrap;
        }
        .filter-label {
            font-size: .82rem;
            font-weight: 700;
            letter-spacing: .14em;
            color: var(--muted);
            text-transform: uppercase;
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .filter-label::after {
            content: "／";
            color: var(--line);
            font-size: 1.1rem;
        }
        .genre-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .genre-tag {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border: 1.5px solid var(--line);
            border-radius: var(--radius-pill);
            padding: 7px 17px;
            background: transparent;
            color: var(--muted);
            font-size: .87rem;
            font-weight: 600;
            cursor: pointer;
            transition: all .22s ease;
            line-height: 1.5;
        }
        .genre-tag:hover {
            border-color: var(--ink);
            background: var(--ink);
            color: var(--surface);
            transform: translateY(-1px);
        }
        .genre-tag.active {
            background: var(--accent);
            border-color: var(--accent);
            color: var(--ink);
            font-weight: 700;
        }
        /* 分类列表区 */
        .category-main {
            padding: 74px 0 40px;
        }
        .category-index-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 36px;
        }
        .category-index-header .index-title {
            display: flex;
            align-items: center;
            gap: 14px;
        }
        .category-index-header .index-title .t-no {
            font-size: .9rem;
            font-weight: 800;
            color: var(--muted);
            letter-spacing: .18em;
        }
        .category-index-header .index-title h2 {
            font-size: clamp(1.5rem, 2.8vw, 2.2rem);
            font-weight: 800;
            margin: 0;
            letter-spacing: -.01em;
        }
        .category-index-header .index-note {
            font-size: .9rem;
            color: var(--muted);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .category-list {
            border-top: 2px solid var(--ink);
        }
        .category-item {
            display: flex;
            align-items: stretch;
            border-bottom: 1px solid var(--line);
            padding: 30px 0;
            gap: 28px;
            transition: background .2s ease;
            position: relative;
        }
        .category-item:hover .category-news-img img {
            transform: scale(1.05);
        }
        .category-item:hover .cat-btn {
            background: var(--ink);
            color: var(--surface);
        }
        .category-num {
            flex-shrink: 0;
            width: 48px;
            padding-top: 8px;
            font-size: 1.3rem;
            font-weight: 800;
            letter-spacing: -.04em;
            color: #D9D2C2;
            display: flex;
            align-items: flex-start;
            justify-content: center;
        }
        .category-news-img {
            width: 120px;
            height: 155px;
            border-radius: var(--radius);
            overflow: hidden;
            flex-shrink: 0;
            border: 1px solid var(--line);
            background: var(--surface);
        }
        .category-news-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .3s ease;
        }
        .category-body {
            flex: 1;
            padding-right: 16px;
        }
        .category-body-top {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 20px;
            flex-wrap: wrap;
        }
        .category-body h3 {
            font-size: 1.35rem;
            font-weight: 800;
            letter-spacing: -.01em;
            margin: 0 0 6px;
        }
        .category-desc {
            color: var(--muted);
            font-size: .95rem;
            line-height: 1.8;
            max-width: 92%;
            margin-bottom: 14px;
        }
        .category-book-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 10px;
        }
        .mini-tag {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: .78rem;
            font-weight: 600;
            padding: 3px 10px;
            border-radius: var(--radius-pill);
            background: #F3EFE4;
            color: var(--muted);
            border: 1px solid transparent;
            line-height: 1.6;
        }
        .mini-tag .dot {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: var(--accent);
            display: inline-block;
        }
        .mini-tag.tag-ink {
            background: #EDE6D8;
            color: var(--ink);
        }
        .category-rep {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            font-size: .85rem;
            color: var(--muted);
            background: rgba(247, 244, 236, .6);
            border-radius: var(--radius-sm);
            padding: 8px 14px;
            width: fit-content;
            border: 1px dashed var(--line);
        }
        .category-rep strong {
            color: var(--ink);
            font-weight: 700;
        }
        .category-action {
            flex-shrink: 0;
            display: flex;
            align-items: center;
        }
        .cat-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: .88rem;
            font-weight: 700;
            padding: 9px 18px;
            border-radius: var(--radius);
            border: 1px solid var(--ink);
            transition: all .2s ease;
            white-space: nowrap;
            color: var(--ink);
        }
        /* 编辑精选 */
        .pick-row {
            padding: 70px 0 80px;
        }
        .pick-header {
            margin-bottom: 38px;
        }
        .pick-header .pick-title {
            display: flex;
            align-items: center;
            gap: 14px;
        }
        .pick-header .pick-title .vertical-deco {
            width: 4px;
            height: 32px;
            background: var(--accent);
            border-radius: 2px;
        }
        .pick-header h2 {
            font-size: clamp(1.4rem, 2.4vw, 1.9rem);
            font-weight: 800;
            margin: 0;
        }
        .pick-header .pick-sub {
            color: var(--muted);
            font-size: .9rem;
            margin-top: 4px;
        }
        .pick-card {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            overflow: hidden;
            transition: transform .25s ease, box-shadow .3s ease, border-color .25s ease;
            height: 100%;
        }
        .pick-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-lift);
            border-color: var(--ink);
        }
        .pick-thumb {
            aspect-ratio: 3 / 4;
            width: 100%;
            overflow: hidden;
            position: relative;
        }
        .pick-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .35s ease;
        }
        .pick-card:hover .pick-thumb img {
            transform: scale(1.04);
        }
        .pick-tag {
            position: absolute;
            left: 12px;
            top: 12px;
            background: rgba(247, 244, 236, .94);
            color: var(--ink);
            border-radius: var(--radius-pill);
            font-size: .76rem;
            font-weight: 700;
            padding: 4px 12px;
            line-height: 1.4;
            border: 1px solid var(--line);
        }
        .pick-info {
            padding: 16px 16px 18px;
            border-top: 1px solid var(--line);
        }
        .pick-name {
            font-size: 1.02rem;
            font-weight: 800;
            margin-bottom: 2px;
            letter-spacing: -.01em;
        }
        .pick-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: var(--muted);
            font-size: .8rem;
            margin-top: 8px;
        }
        .pick-score {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-weight: 700;
            color: var(--ink);
        }
        .pick-score i {
            font-style: normal;
            color: var(--accent);
        }
        /* 阅读方式提示条 */
        .reading-tip-band {
            background: var(--dark-bg);
            color: var(--dark-text);
            padding: 20px 0;
        }
        .reading-tip-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 28px;
            flex-wrap: wrap;
        }
        .reading-tip-inner .tip-text {
            font-weight: 600;
            font-size: .9rem;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .tip-highlight {
            background: var(--accent);
            color: var(--ink);
            padding: 3px 12px;
            border-radius: var(--radius-pill);
            font-size: .82rem;
            font-weight: 800;
        }
        /* FAQ */
        .faq-section {
            padding: var(--spacer) 0;
            background: var(--surface);
            border-bottom: 1px solid var(--line);
        }
        .faq-head {
            display: flex;
            justify-content: space-between;
            gap: 30px;
            margin-bottom: 42px;
        }
        .faq-head .left h2 {
            font-size: clamp(1.5rem, 2.6vw, 2.1rem);
            font-weight: 800;
            margin: 0;
        }
        .faq-head .left .desc {
            color: var(--muted);
            margin-top: 8px;
            font-size: .94rem;
        }
        .faq-head-right {
            flex-shrink: 0;
        }
        .accordion {
            --bs-accordion-border-color: var(--line);
            --bs-accordion-bg: transparent;
        }
        .accordion-item {
            border: none;
            border-bottom: 1px solid var(--line);
            background: transparent;
            border-radius: 0 !important;
        }
        .accordion-button {
            background: transparent;
            box-shadow: none;
            font-weight: 700;
            font-size: 1.03rem;
            color: var(--ink);
            padding: 22px 16px;
            padding-right: 48px;
            position: relative;
            border-radius: 0 !important;
            line-height: 1.6;
        }
        .accordion-button::after {
            content: "+";
            background-image: none;
            font-size: 1.7rem;
            font-weight: 300;
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-55%);
            color: var(--ink);
            width: auto;
            height: auto;
            font-family: var(--font);
            transition: transform .25s ease;
        }
        .accordion-button:not(.collapsed) {
            background: transparent;
            color: var(--ink);
            box-shadow: none;
        }
        .accordion-button:not(.collapsed)::after {
            transform: translateY(-50%) rotate(45deg);
        }
        .accordion-button:hover {
            background: rgba(229, 223, 210, .25);
        }
        .accordion-body {
            padding: 0 16px 26px;
            color: var(--muted);
            font-size: .96rem;
            background: transparent;
            line-height: 1.9;
        }
        /* CTA */
        .category-cta {
            background: var(--dark-bg);
            color: var(--dark-text);
            padding: 80px 0;
            position: relative;
            overflow: hidden;
        }
        .category-cta::before {
            content: "51";
            position: absolute;
            right: -30px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 18rem;
            font-weight: 900;
            line-height: 1;
            color: rgba(247, 244, 236, .04);
            font-family: inherit;
            letter-spacing: -.06em;
            z-index: 0;
        }
        .category-cta::after {
            content: "";
            position: absolute;
            width: 320px;
            height: 320px;
            border: 60px solid rgba(246, 167, 0, .12);
            border-radius: 50%;
            right: 14%;
            top: -120px;
            pointer-events: none;
        }
        .category-cta .container-xxl {
            position: relative;
            z-index: 1;
        }
        .cta-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 46px;
            flex-wrap: wrap;
        }
        .cta-text h2 {
            font-size: clamp(1.7rem, 3vw, 2.5rem);
            font-weight: 800;
            margin-bottom: 12px;
            letter-spacing: -.02em;
            line-height: 1.35;
        }
        .cta-text p {
            color: rgba(247, 244, 236, .75);
            margin-bottom: 0;
            font-size: .98rem;
        }
        .cta-actions {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
        }
        .btn-cta {
            background: var(--accent);
            border: 1px solid var(--accent);
            color: var(--ink);
            font-weight: 800;
            padding: 14px 32px;
            font-size: 1rem;
            min-height: 48px;
        }
        .btn-cta:hover {
            background: #FFC23D;
            border-color: var(--dark-text);
            transform: translateY(-2px);
        }
        .btn-cta-line {
            border: 1.5px solid rgba(247, 244, 236, .6);
            color: var(--dark-text);
            padding: 14px 28px;
            font-weight: 700;
            min-height: 48px;
        }
        .btn-cta-line:hover {
            background: var(--dark-text);
            color: var(--ink);
            border-color: var(--dark-text);
        }
        /* 页脚 */
        .site-footer {
            background: var(--dark-bg);
            color: var(--dark-text);
            border-top: 1px solid var(--line);
            padding: 72px 0 0;
        }
        .site-footer .inner {
            display: flex;
            gap: 48px;
            flex-wrap: wrap;
            padding-bottom: 52px;
        }
        .site-footer .footer-brand {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            background: var(--dark-bg);
            color: var(--dark-text);
            font-weight: 800;
            font-size: 1.3rem;
            margin-bottom: 18px;
        }
        .site-footer .brand-bubble {
            background: var(--accent);
            color: var(--accent-ink);
        }
        .site-footer .brand-bubble::after {
            background: var(--accent);
        }
        .site-footer .footer-desc {
            color: rgba(247, 244, 236, .72);
            font-size: .93rem;
            line-height: 1.9;
            margin-top: 16px;
        }
        .site-footer h4 {
            font-size: .95rem;
            color: var(--dark-text);
            font-weight: 700;
            margin-bottom: 22px;
            position: relative;
            padding-bottom: 12px;
        }
        .site-footer h4::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 26px;
            height: 2px;
            background: var(--accent);
        }
        .site-footer ul li {
            margin-bottom: 12px;
        }
        .site-footer ul a {
            color: rgba(247, 244, 236, .72);
            font-size: .9rem;
            transition: color .2s, padding-left .2s;
        }
        .site-footer ul a:hover {
            color: var(--accent);
            padding-left: 3px;
        }
        .footer-divider {
            border: none;
            border-top: 1px solid rgba(247, 244, 236, .12);
            margin: 0;
        }
        .footer-bottom {
            text-align: center;
            padding: 28px 0;
            font-size: .87rem;
            color: rgba(247, 244, 236, .5);
            border-top: 1px solid rgba(247, 244, 236, .08);
        }
        .lg-none {
            display: none;
        }
        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: .01ms !important;
                transition-duration: .01ms !important;
            }
            html {
                scroll-behavior: auto;
            }
        }
        @media (max-width: 991px) {
            :root {
                --spacer: 72px;
            }
            .lg-none {
                display: block;
            }
            .toolbar-right,
            .main-nav {
                display: none;
            }
            .navbar-collapse {
                padding-top: 16px;
                border-top: 1px solid var(--line);
                margin-top: 12px;
            }
            .category-page-head {
                flex-direction: column;
                align-items: flex-start;
                gap: 28px;
            }
            .category-page-meta {
                text-align: left;
                border-right: none;
                border-left: 3px solid var(--accent);
                padding-left: 18px;
                padding-right: 0;
            }
            .category-news-img {
                width: 100px;
                height: 130px;
            }
        }
        @media (max-width: 767px) {
            :root {
                --spacer: 56px;
            }
            .container-xxl {
                padding-left: 20px;
                padding-right: 20px;
            }
            .section {
                padding: var(--spacer) 0;
            }
            .category-hero {
                padding: 42px 0 30px;
            }
            .breadcrumb-line {
                margin-bottom: 22px;
                font-size: .78rem;
            }
            .category-page-title .label-num {
                font-size: .76rem;
            }
            .category-item {
                flex-direction: column;
                gap: 18px;
                padding: 24px 0;
            }
            .category-num {
                display: none;
            }
            .category-news-img {
                width: 80px;
                height: 108px;
                border-radius: var(--radius-sm);
            }
            .category-news-img img {
                object-position: top center;
            }
            .category-body {
                width: 100%;
            }
            .category-body h3 {
                font-size: 1.1rem;
            }
            .category-desc {
                font-size: .86rem;
                max-width: 100%;
            }
            .category-action {
                margin-top: 6px;
            }
            .cat-btn {
                width: 100%;
                justify-content: center;
                min-height: 44px;
            }
            .filter-row {
                gap: 16px;
            }
            .filter-label {
                width: 100%;
                margin-bottom: 0;
            }
            .filter-label::after {
                display: none;
            }
            .category-index-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }
            .category-index-header .index-note {
                font-size: .8rem;
            }
            .category-rep {
                padding: 8px 12px;
                font-size: .78rem;
            }
            .pick-thumb {
                aspect-ratio: 4 / 5;
            }
            .reading-tip-inner {
                justify-content: center;
                text-align: center;
            }
            .reading-tip-inner .tip-text {
                width: 100%;
                justify-content: center;
                font-size: .84rem;
            }
            .faq-head {
                flex-direction: column;
                gap: 20px;
            }
            .accordion-button {
                padding: 18px 44px 18px 10px;
                font-size: .96rem;
                line-height: 1.65;
            }
            .accordion-body {
                padding: 0 10px 20px;
                font-size: .9rem;
            }
            .cta-content {
                flex-direction: column;
                align-items: flex-start;
                gap: 28px;
            }
            .cta-actions {
                flex-direction: column;
                width: 100%;
            }
            .cta-actions .btn {
                width: 100%;
            }
            .category-cta {
                padding: 56px 0;
            }
            .site-footer .brand-bubble {
                background: var(--accent);
                color: var(--accent-ink);
            }
            .site-footer .footer-brand {
                gap: 10px;
                font-size: 1.15rem;
            }
            .site-footer h4 {
                font-size: .9rem;
                margin-bottom: 16px;
            }
        }
        @media (max-width: 520px) {
            .category-news-img {
                width: 74px;
                height: 100px;
            }
            .genre-tag {
                padding: 6px 12px;
                font-size: .8rem;
            }
            .category-book-tags .mini-tag {
                font-size: .74rem;
            }
        }

/* roulang: framework shim */
/* 覆盖 Bootstrap 等对 a/btn 的全局默认，避免导航出现下划线/蓝链 */
.site-header a,.site-header a:hover,.navbar a,.navbar a:hover,.nav-links a,.nav-links a:hover,header nav a,header nav a:hover{text-decoration:none}
.site-header .btn,.navbar .btn,.nav-cta{text-decoration:none}