/* roulang page: index */
:root{
  --berry:#542348;--berry-deep:#35152f;--orange:#ef714d;--apricot:#ffd8a8;
  --cream:#fff9ef;--paper:#fffdf8;--ink:#29242b;--muted:#746d73;--line:#eaded2;
  --blue:#6972d8;--green:#4f9a72;--shadow:0 18px 45px rgba(73,35,54,.11);
  --radius:16px;--container:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"思源黑体","苹方","Microsoft YaHei",Arial,sans-serif;color:var(--ink);background:var(--cream);line-height:1.7;padding-bottom:76px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;border:0;cursor:pointer}
.container{width:min(var(--container),calc(100% - 40px));margin:auto}
.site-header{height:76px;position:sticky;top:0;z-index:20;background:rgba(255,249,239,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(234,222,210,.8)}
.nav-wrap{height:76px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;white-space:nowrap}
.logo-mark{width:38px;height:38px;background:var(--berry);color:#fff;border-radius:11px 11px 11px 4px;display:grid;place-items:center;font-size:19px;box-shadow:4px 4px 0 var(--orange)}
.brand-name{font-size:17px;letter-spacing:.2px}
.nav-list{display:flex;align-items:center;gap:25px;font-size:14px;color:#62575f}
.nav-list a{padding:8px 0;position:relative}
.nav-list a:after{content:"";position:absolute;left:0;right:100%;bottom:1px;height:2px;background:var(--orange);transition:.25s}
.nav-list a:hover,.nav-list a.active{color:var(--berry)}
.nav-list a:hover:after,.nav-list a.active:after{right:0}
.nav-cta{padding:10px 17px!important;background:var(--berry);color:#fff!important;border-radius:10px}
.nav-cta:after{display:none}
.menu-toggle{display:none;background:var(--berry);color:#fff;border-radius:9px;padding:8px 11px}
.hero{padding:76px 0 84px;background:
 radial-gradient(circle at 86% 25%,rgba(239,113,77,.18),transparent 25%),
 linear-gradient(135deg,#fff9ef 0%,#ffe7c5 100%);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.03fr .97fr;align-items:center;gap:65px}
.eyebrow,.section-kicker{color:var(--orange);font-size:13px;font-weight:800;letter-spacing:2px;text-transform:uppercase}
.hero h1{font-size:clamp(36px,5vw,65px);line-height:1.14;letter-spacing:-2px;margin:17px 0 20px;color:var(--berry)}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero-sub{font-size:20px;font-weight:700;color:#473542;margin-bottom:14px}
.hero-copy{font-size:16px;color:var(--muted);max-width:600px}
.actions{display:flex;gap:13px;margin:29px 0 24px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:11px;font-weight:700;transition:.25s;border:1px solid transparent}
.btn-primary{background:var(--berry);color:#fff;box-shadow:0 8px 18px rgba(84,35,72,.2)}
.btn-primary:hover{background:#71305d;transform:translateY(-2px)}
.btn-light{background:#fff8ef;border-color:#d9c7bd;color:var(--berry)}
.btn-light:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-2px)}
.btn:focus,.nav-list a:focus,.menu-toggle:focus{outline:3px solid rgba(239,113,77,.4);outline-offset:3px}
.trust-line{display:flex;gap:20px;flex-wrap:wrap;color:#756a6d;font-size:13px}
.trust-line span:before{content:"●";color:var(--green);font-size:10px;margin-right:6px}
.hero-stage{min-height:370px;position:relative;display:grid;place-items:center}
.stage-card{width:330px;height:395px;background:var(--berry);border-radius:25px 25px 25px 7px;padding:24px;color:#fff;transform:rotate(5deg);box-shadow:var(--shadow);position:relative;overflow:hidden}
.stage-card:before{content:"";position:absolute;width:210px;height:210px;border-radius:50%;background:var(--orange);right:-60px;top:30px;opacity:.9}
.stage-card:after{content:"";position:absolute;width:150px;height:150px;background:#8e4771;left:-45px;bottom:-20px;border-radius:45% 55% 30% 70%}
.stage-top{position:relative;z-index:1;display:flex;justify-content:space-between;font-size:12px;opacity:.8}
.stage-title{position:absolute;z-index:2;left:25px;bottom:65px;font-size:37px;line-height:1.2;font-weight:900}
.stage-caption{position:absolute;z-index:2;left:27px;bottom:28px;font-size:13px;color:#f9d9be}
.ticket{position:absolute;right:7%;bottom:25px;background:#fff8ef;color:var(--berry);padding:17px 18px;border-radius:9px;box-shadow:0 12px 30px #58213e2b;transform:rotate(-7deg);font-size:13px;width:180px}
.ticket strong{display:block;font-size:22px;margin:2px 0}
section{padding:84px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:31px}
.section-head h2{font-size:clamp(25px,3vw,38px);line-height:1.25;color:var(--berry);letter-spacing:-.8px}
.section-head p{max-width:590px;color:var(--muted);font-size:14px}
.section-kicker{margin-bottom:8px}
.benefits{background:var(--paper);border-bottom:1px solid var(--line)}
.benefit-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:14px}
.benefit{padding:27px;border:1px solid var(--line);background:#fffaf3;min-height:170px;position:relative;overflow:hidden}
.benefit:first-child{background:var(--berry);color:#fff;border-color:var(--berry)}
.benefit h3{font-size:21px;margin:12px 0 8px}
.benefit p{font-size:14px;color:var(--muted)}
.benefit:first-child p{color:#e8d8df}
.number{font-size:12px;font-weight:800;color:var(--orange);letter-spacing:1px}
.entrance{background:#fff1dd}
.matrix{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.matrix a{padding:20px 15px;background:#fffaf3;border:1px solid #efd7bf;border-radius:13px;transition:.25s}
.matrix a:hover{transform:translateY(-4px);border-color:var(--orange);box-shadow:var(--shadow)}
.matrix b{display:block;color:var(--berry);font-size:18px}
.matrix span{display:block;color:var(--muted);font-size:12px;margin-top:7px}
.latest{background:var(--paper)}
.poster-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px}
.poster-card{min-width:0}
.poster{height:245px;border-radius:14px 14px 14px 4px;position:relative;overflow:hidden;padding:14px;color:#fff;display:flex;align-items:end;background:linear-gradient(145deg,#7b3d67,#f08054)}
.poster:before{content:"";position:absolute;width:140px;height:140px;border:22px solid rgba(255,218,175,.45);border-radius:50%;right:-28px;top:22px}
.poster:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(30,10,25,.7));}
.poster.v2{background:linear-gradient(145deg,#4d5c9d,#e5a16c)}
.poster.v3{background:linear-gradient(145deg,#a44f54,#3e254c)}
.poster.v4{background:linear-gradient(145deg,#d27a45,#5a3164)}
.poster.v5{background:linear-gradient(145deg,#305c65,#e58a5c)}
.poster.v6{background:linear-gradient(145deg,#78517a,#e0a95c)}
.poster.v7{background:linear-gradient(145deg,#c85d50,#47254d)}
.poster.v8{background:linear-gradient(145deg,#465a8f,#dd7255)}
.poster.v9{background:linear-gradient(145deg,#754568,#d69d63)}
.poster.v10{background:linear-gradient(145deg,#49736e,#cf6e4e)}
.poster.v11{background:linear-gradient(145deg,#945b45,#4d2855)}
.poster.v12{background:linear-gradient(145deg,#5f477f,#e27a60)}
.poster-text{position:relative;z-index:1;font-size:24px;font-weight:900;line-height:1.15;max-width:85%}
.poster-sub{position:absolute;z-index:1;top:13px;left:13px;font-size:11px;background:rgba(255,255,255,.2);padding:3px 7px;border-radius:5px}
.card-info{padding:11px 2px}
.card-info h3{font-size:16px;color:var(--berry)}
.card-meta{display:flex;justify-content:space-between;gap:6px;color:var(--muted);font-size:12px;margin-top:4px}
.badge{display:inline-block;padding:2px 7px;border-radius:5px;font-size:11px;font-weight:800}
.badge-blue{background:#e9eaff;color:#5159b7}.badge-orange{background:#ffe1c7;color:#c15432}.badge-green{background:#dff1e4;color:#397551}
.featured{background:var(--cream)}
.featured-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:20px}
.featured-main{min-height:320px;background:linear-gradient(135deg,#542348,#8b3e68);color:#fff;border-radius:18px;padding:30px;display:flex;flex-direction:column;justify-content:end;position:relative;overflow:hidden}
.featured-main:before{content:"";position:absolute;width:280px;height:280px;border-radius:50%;background:#ef714d;right:-50px;top:-70px}
.featured-main>*{position:relative;z-index:1}
.featured-main h3{font-size:31px;margin:8px 0}
.featured-main p{max-width:430px;color:#f0dce4;font-size:14px}
.featured-side{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mini-feature{background:#fffaf3;border:1px solid var(--line);border-radius:13px;padding:18px;min-height:150px}
.mini-feature h3{font-size:17px;color:var(--berry);margin:15px 0 5px}
.mini-feature p{font-size:12px;color:var(--muted)}
.categories{background:#f8eadb}
.category-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.category-item{padding:22px 18px;min-height:188px;background:var(--paper);border-top:5px solid var(--orange);border-radius:12px;transition:.2s}
.category-item:nth-child(2){border-color:var(--blue)}.category-item:nth-child(3){border-color:var(--green)}.category-item:nth-child(4){border-color:#9a5e86}.category-item:nth-child(5){border-color:#dd9b4b}
.category-item:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.category-item b{display:block;color:var(--berry);font-size:19px;margin:13px 0 6px}
.category-item p{font-size:13px;color:var(--muted)}
.category-item small{color:var(--orange);font-weight:700}
.social{background:var(--paper)}
.social-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:40px;align-items:center}
.quote{font-size:25px;color:var(--berry);line-height:1.5;font-weight:800}
.quote small{display:block;color:var(--muted);font-size:13px;font-weight:400;margin-top:16px}
.preference{display:grid;gap:15px}
.preference-row{display:grid;grid-template-columns:100px 1fr 48px;gap:12px;align-items:center;font-size:13px}
.bar{height:8px;background:#f0e4da;border-radius:8px;overflow:hidden}.bar i{display:block;height:100%;background:var(--orange);border-radius:8px}
.compare{background:#fff1dd}
.compare-box{display:grid;grid-template-columns:1fr 1fr;background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.compare-col{padding:28px}.compare-col:first-child{background:#f4e9df}.compare-col h3{color:var(--muted);font-size:18px}.compare-col:last-child{background:#fffaf3}.compare-col:last-child h3{color:var(--berry)}
.compare-col li{list-style:none;padding:12px 0;border-bottom:1px dashed #dbcac0;font-size:14px}.compare-col li:before{content:"—";margin-right:10px;color:var(--orange);font-weight:bold}
.ranking{background:var(--berry-deep);color:#fff}
.ranking .section-head h2{color:#fff}.ranking .section-head p{color:#dbc8d1}
.rank-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 45px}
.rank-item{display:grid;grid-template-columns:38px 1fr auto auto;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.rank-no{font-size:22px;font-weight:900;color:var(--orange)}.rank-item:nth-child(n+4) .rank-no{font-size:16px;color:#cfb4c1}
.rank-title{font-weight:700}.rank-type{color:#e4bca8;font-size:11px}.rank-score{font-size:13px;color:#ffd19f}
.news{background:var(--paper)}
.news-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
.news-main{border-radius:16px;min-height:305px;padding:27px;background:linear-gradient(145deg,#793c67,#d87755);color:#fff;display:flex;flex-direction:column;justify-content:end}
.news-main h3{font-size:25px;line-height:1.35;margin:10px 0}
.news-main p{font-size:13px;color:#f9dfe1}
.news-list{display:grid;gap:0}
.news-item{display:grid;grid-template-columns:75px 1fr;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.news-thumb{height:57px;border-radius:8px;background:linear-gradient(135deg,var(--orange),var(--berry))}
.news-item h3{font-size:15px;color:var(--berry);line-height:1.4}.news-item time{font-size:11px;color:var(--muted)}
.faq{background:#f8eadb}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
details{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:17px 20px}
summary{cursor:pointer;color:var(--berry);font-weight:800;list-style:none;display:flex;justify-content:space-between}
summary:after{content:"＋";color:var(--orange)}details[open] summary:after{content:"−"}details p{font-size:13px;color:var(--muted);padding-top:12px}
.assurance{padding:38px 0;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.assurance-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.assurance-item{display:flex;gap:12px;align-items:center;border-right:1px solid var(--line)}
.assurance-item:last-child{border:0}.assurance-icon{width:36px;height:36px;border-radius:50%;background:#ffe0c5;color:var(--orange);display:grid;place-items:center;font-weight:900}.assurance-item b{display:block;color:var(--berry);font-size:14px}.assurance-item span{font-size:12px;color:var(--muted)}
.site-footer{background:#241522;color:#d9c8d2;padding:58px 0 30px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:35px}
.footer-brand{color:#fff;font-size:19px;font-weight:800;margin-bottom:13px}.footer-desc{font-size:13px;color:#bba9b3;max-width:260px}
.site-footer h3{color:#fff;font-size:15px;margin-bottom:14px}.site-footer a{display:block;color:#bba9b3;font-size:13px;margin:8px 0}.site-footer a:hover{color:#ffb68d}.copyright{margin-top:45px;padding-top:20px;border-top:1px solid #493347;color:#9b8993;font-size:12px}
.fixed-bar{position:fixed;z-index:25;bottom:0;left:0;right:0;background:rgba(53,21,47,.96);color:#fff;padding:11px 0;box-shadow:0 -8px 25px rgba(37,17,31,.18)}
.fixed-inner{display:flex;align-items:center;justify-content:space-between;gap:15px}.fixed-inner p{font-size:14px}.fixed-inner p b{color:#ffb486}.fixed-actions{display:flex;gap:9px}.fixed-actions .btn{padding:8px 15px;font-size:13px}.fixed-actions .btn-light{background:transparent;border-color:#ae879f;color:#fff}
@media(max-width:1024px){
  .nav-list{gap:14px}.hero-grid{gap:30px}.poster-grid{grid-template-columns:repeat(3,1fr)}.category-grid{grid-template-columns:repeat(3,1fr)}.matrix{grid-template-columns:repeat(3,1fr)}.footer-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .container{width:min(100% - 28px,var(--container))}.site-header,.nav-wrap{height:66px}.brand-name{font-size:15px}.menu-toggle{display:block}.nav-list{display:none;position:absolute;top:66px;left:14px;right:14px;padding:12px;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch;gap:0}.nav-list.open{display:flex}.nav-list a{padding:11px 10px}.nav-cta{text-align:center}.hero{padding:55px 0 60px}.hero-grid{grid-template-columns:1fr;gap:35px}.hero h1{font-size:42px}.hero-stage{min-height:340px}.stage-card{width:275px;height:335px}.stage-title{font-size:31px}.section-head{display:block}.section-head p{margin-top:12px}.benefit-grid,.featured-grid,.social-grid,.compare-box,.news-grid{grid-template-columns:1fr}.poster-grid{grid-template-columns:repeat(2,1fr);gap:13px}.poster{height:220px}.category-grid{grid-template-columns:repeat(2,1fr)}.rank-grid{grid-template-columns:1fr}.assurance-row{grid-template-columns:repeat(2,1fr)}.assurance-item:nth-child(2){border:0}.fixed-inner p{display:none}.fixed-inner{justify-content:center}.fixed-actions{width:100%}.fixed-actions .btn{flex:1}
}
@media(max-width:480px){
  section{padding:60px 0}.hero h1{font-size:36px}.hero-sub{font-size:17px}.hero-copy{font-size:14px}.actions .btn{width:100%}.matrix{grid-template-columns:repeat(2,1fr)}.matrix a{padding:15px 12px}.featured-side,.faq-grid{grid-template-columns:1fr}.category-grid{grid-template-columns:1fr 1fr}.category-item{min-height:165px;padding:17px 13px}.poster{height:190px}.poster-text{font-size:19px}.card-info h3{font-size:14px}.social-grid{gap:25px}.quote{font-size:21px}.compare-col{padding:20px}.footer-grid{grid-template-columns:1fr 1fr;gap:25px}.footer-grid>div:first-child{grid-column:1/-1}.assurance-item{border:0!important}.assurance-row{gap:20px}.assurance-item{align-items:flex-start;display:block}.assurance-icon{margin-bottom:7px}
}

/* roulang page: category1 */
:root{
 --berry:#542348;--berry-deep:#35152f;--orange:#ef714d;--apricot:#ffd8a8;
 --cream:#fff9ef;--paper:#fffdf8;--ink:#29242b;--muted:#746d73;--line:#eaded2;
 --blue:#6972d8;--green:#4f9a72;--shadow:0 18px 45px rgba(73,35,54,.11);
 --radius:16px;--container:1200px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"思源黑体","苹方","Microsoft YaHei",Arial,sans-serif;color:var(--ink);background:var(--cream);line-height:1.7;padding-bottom:78px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;border:0;cursor:pointer}
.container{width:min(var(--container),calc(100% - 40px));margin:auto}
.site-header{height:76px;position:sticky;top:0;z-index:20;background:rgba(255,249,239,.95);backdrop-filter:blur(14px);border-bottom:1px solid rgba(234,222,210,.85)}
.nav-wrap{height:76px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;white-space:nowrap}
.logo-mark{width:38px;height:38px;background:var(--berry);color:#fff;border-radius:11px 11px 11px 4px;display:grid;place-items:center;font-size:19px;box-shadow:4px 4px 0 var(--orange)}
.brand-name{font-size:17px;letter-spacing:.2px}
.nav-list{display:flex;align-items:center;gap:25px;font-size:14px;color:#62575f}
.nav-list a{padding:8px 0;position:relative}
.nav-list a:after{content:"";position:absolute;left:0;right:100%;bottom:1px;height:2px;background:var(--orange);transition:.25s}
.nav-list a:hover,.nav-list a.active{color:var(--berry)}
.nav-list a:hover:after,.nav-list a.active:after{right:0}
.nav-cta{padding:10px 17px!important;background:var(--berry);color:#fff!important;border-radius:10px}
.nav-cta:after{display:none}
.menu-toggle{display:none;background:var(--berry);color:#fff;border-radius:9px;padding:8px 11px}
main{overflow:hidden}
.category-intro{padding:64px 0 52px;background:linear-gradient(135deg,#fff9ef,#ffe7c5);border-bottom:1px solid var(--line)}
.breadcrumb{font-size:13px;color:var(--muted);margin-bottom:22px}
.breadcrumb a{color:var(--berry);font-weight:700}
.intro-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center}
.eyebrow,.section-kicker{color:var(--orange);font-size:13px;font-weight:800;letter-spacing:2px}
.category-intro h1{font-size:clamp(34px,5vw,58px);line-height:1.16;letter-spacing:-1.5px;color:var(--berry);margin:14px 0 17px}
.category-intro h1 em{font-style:normal;color:var(--orange)}
.intro-copy{max-width:650px;color:var(--muted);font-size:16px;margin:0}
.intro-note{background:var(--berry);color:#fff;border-radius:22px 22px 22px 7px;padding:27px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.intro-note:after{content:"";position:absolute;width:150px;height:150px;border-radius:50%;background:var(--orange);right:-40px;top:-45px;opacity:.85}
.intro-note>*{position:relative;z-index:1}
.intro-note strong{font-size:26px;display:block;margin:12px 0 4px}
.intro-note p{color:#f4dce4;font-size:13px;margin:0;max-width:280px}
.note-line{display:flex;justify-content:space-between;font-size:12px;color:#f7d7bd}
section{padding:76px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:28px}
.section-head h2{font-size:clamp(25px,3vw,36px);line-height:1.25;color:var(--berry);letter-spacing:-.7px;margin:0}
.section-head p{max-width:570px;color:var(--muted);font-size:14px;margin:0}
.section-kicker{margin-bottom:8px}
.filter-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 17px;background:var(--paper);border:1px solid var(--line);border-radius:13px;margin-bottom:28px;box-shadow:0 8px 22px rgba(73,35,54,.04)}
.filter-list{display:flex;flex-wrap:wrap;gap:8px}
.filter-list a{padding:7px 13px;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-size:13px;background:#fffaf3}
.filter-list a:hover,.filter-list a.active{background:var(--berry);border-color:var(--berry);color:#fff}
.filter-status{font-size:13px;color:var(--muted);white-space:nowrap}
.poster-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 17px}
.poster-card{min-width:0;transition:.25s}
.poster-card:hover{transform:translateY(-5px)}
.poster-art{height:245px;border-radius:14px 14px 14px 5px;position:relative;overflow:hidden;padding:15px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 8px 20px rgba(73,35,54,.1)}
.poster-art:before{content:"";position:absolute;width:170px;height:170px;border-radius:50%;right:-45px;top:28px;background:rgba(239,113,77,.78)}
.poster-art:after{content:"";position:absolute;width:120px;height:120px;left:-30px;bottom:-35px;border-radius:50%;background:rgba(255,216,168,.3)}
.poster-art>*{position:relative;z-index:1}
.poster-1{background:#5b2b53}.poster-2{background:#3b526d}.poster-3{background:#713a4d}.poster-4{background:#5b4936}
.poster-5{background:#4d3965}.poster-6{background:#864936}.poster-7{background:#3d5b57}.poster-8{background:#633c51}
.poster-9{background:#4a4164}.poster-10{background:#754c39}.poster-11{background:#4c536d}.poster-12{background:#643b4b}
.poster-date{font-size:11px;opacity:.82;letter-spacing:1px}
.poster-title{font-size:27px;line-height:1.25;font-weight:900;max-width:125px}
.poster-type{font-size:12px;color:#ffe4c8}
.card-info{padding:11px 2px}
.card-info h3{font-size:16px;color:var(--berry);margin:0}
.card-meta{display:flex;justify-content:space-between;gap:6px;color:var(--muted);font-size:12px;margin-top:4px}
.badge{display:inline-block;padding:2px 7px;border-radius:5px;font-size:11px;font-weight:800}
.badge-blue{background:#e9eaff;color:#5159b7}.badge-orange{background:#ffe1c7;color:#c15432}.badge-green{background:#dff1e4;color:#397551}
.more-row{margin-top:30px;text-align:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:11px;font-weight:700;transition:.25s;border:1px solid transparent}
.btn-primary{background:var(--berry);color:#fff;box-shadow:0 8px 18px rgba(84,35,72,.2)}
.btn-primary:hover{background:#71305d;transform:translateY(-2px)}
.btn-light{background:#fff8ef;border-color:#d9c7bd;color:var(--berry)}
.btn-light:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-2px)}
.btn:focus,.nav-list a:focus,.menu-toggle:focus,.filter-list a:focus{outline:3px solid rgba(239,113,77,.4);outline-offset:3px}
.band{background:#fff4e5}
.feature-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:20px}
.feature-main{min-height:280px;background:linear-gradient(135deg,#542348,#873b66);color:#fff;border-radius:18px;padding:29px;display:flex;flex-direction:column;justify-content:end;position:relative;overflow:hidden}
.feature-main:before{content:"";position:absolute;width:270px;height:270px;border-radius:50%;background:var(--orange);right:-60px;top:-75px}
.feature-main>*{position:relative;z-index:1}
.feature-main h3{font-size:30px;line-height:1.25;margin:8px 0}
.feature-main p{max-width:430px;color:#f1dce5;font-size:14px}
.feature-side{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mini-feature{background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:18px;min-height:132px}
.mini-feature h3{font-size:17px;color:var(--berry);margin:12px 0 4px}
.mini-feature p{font-size:12px;color:var(--muted);margin:0}
.category-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.category-item{padding:21px 18px;min-height:165px;background:var(--paper);border-top:5px solid var(--orange);border-radius:12px;transition:.2s}
.category-item:nth-child(2){border-color:var(--blue)}.category-item:nth-child(3){border-color:var(--green)}.category-item:nth-child(4){border-color:#9a5e86}
.category-item:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.category-item b{display:block;color:var(--berry);font-size:18px;margin:12px 0 5px}
.category-item p{font-size:13px;color:var(--muted);margin:0}
.category-item small{color:var(--orange);font-weight:700}
.timeline{border-left:2px solid #e9c8b5;margin-left:8px;padding-left:27px;display:grid;gap:20px}
.timeline-item{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px 19px}
.timeline-item:before{content:"";position:absolute;width:11px;height:11px;background:var(--orange);border:3px solid var(--cream);border-radius:50%;left:-35px;top:23px}
.timeline-item strong{color:var(--berry);font-size:16px}
.timeline-item span{float:right;color:var(--muted);font-size:12px}
.timeline-item p{margin:5px 0 0;color:var(--muted);font-size:13px}
.rank-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:30px;align-items:start}
.rank-lead{background:var(--berry);color:#fff;border-radius:17px;padding:27px;min-height:270px}
.rank-lead h3{font-size:27px;line-height:1.3;margin:12px 0}
.rank-lead p{color:#edd6df;font-size:14px}
.rank-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rank-item{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;padding:12px 14px;background:var(--paper);border:1px solid var(--line);border-radius:10px}
.rank-number{font-size:21px;font-weight:900;color:var(--orange)}
.rank-item:nth-child(n+4) .rank-number{color:var(--muted);font-size:17px}
.rank-name{font-weight:700;color:var(--berry);font-size:14px}
.rank-data{text-align:right;color:var(--muted);font-size:11px}
.faq-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.faq-item{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.faq-item summary{cursor:pointer;color:var(--berry);font-weight:800;list-style:none;padding-right:20px;position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:after{content:"+";position:absolute;right:0;color:var(--orange);font-size:20px;top:-4px}
.faq-item[open] summary:after{content:"−"}
.faq-item p{font-size:13px;color:var(--muted);margin:12px 0 0}
.assurance{background:var(--berry-deep);color:#fff;padding:28px 0}
.assurance-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.assurance-item{border-right:1px solid rgba(255,255,255,.2);padding-right:18px}
.assurance-item:last-child{border:0}
.assurance-item b{display:block;font-size:16px;margin-bottom:4px}
.assurance-item span{font-size:12px;color:#e8cbd7}
.site-footer{background:var(--berry-deep);color:#fff;padding:54px 0 25px}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:35px}
.footer-brand{font-size:20px;font-weight:800;margin-bottom:10px}
.footer-desc{color:#d9c0cc;font-size:13px;max-width:250px;margin:0}
.site-footer h3{font-size:14px;color:#ffd8a8;margin:0 0 13px}
.site-footer a{display:block;color:#d9c0cc;font-size:13px;margin:7px 0;transition:.2s}
.site-footer a:hover{color:#fff}
.copyright{border-top:1px solid rgba(255,255,255,.15);margin-top:35px;padding-top:18px;color:#bfa7b2;font-size:12px}
.bottom-bar{position:fixed;bottom:0;left:0;right:0;background:rgba(53,21,47,.97);color:#fff;z-index:30;padding:11px 0;box-shadow:0 -5px 20px rgba(53,21,47,.16)}
.bottom-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.bottom-inner strong{font-size:14px}.bottom-inner span{color:#e7cdd8;font-size:12px}
.bottom-actions{display:flex;gap:9px}.bottom-actions .btn{padding:8px 14px;font-size:13px}
@media(max-width:1024px){
 .nav-list{gap:14px;font-size:13px}.intro-grid{gap:35px}.poster-grid{grid-template-columns:repeat(3,1fr)}
 .category-strip{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
 body{padding-bottom:118px}.container{width:min(var(--container),calc(100% - 28px))}
 .site-header,.nav-wrap{height:68px}.brand-name{font-size:15px}.logo-mark{width:34px;height:34px}
 .menu-toggle{display:block}.nav-list{display:none;position:absolute;top:68px;left:0;right:0;padding:14px 20px 19px;background:var(--cream);border-bottom:1px solid var(--line);box-shadow:var(--shadow);flex-direction:column;align-items:stretch;gap:5px}
 .nav-list.open{display:flex}.nav-list a{padding:9px 4px}.nav-cta{text-align:center;margin-top:4px}
 .category-intro{padding:42px 0}.intro-grid,.feature-layout,.rank-layout{grid-template-columns:1fr;gap:25px}
 .category-intro h1{font-size:39px}.intro-note{max-width:520px}
 section{padding:58px 0}.section-head{display:block}.section-head p{margin-top:10px}
 .poster-grid{grid-template-columns:repeat(2,1fr);gap:22px 12px}.poster-art{height:220px}.poster-title{font-size:23px}
 .rank-list{grid-template-columns:1fr}.faq-list{grid-template-columns:1fr}.assurance-grid{grid-template-columns:repeat(2,1fr);gap:20px}
 .assurance-item:nth-child(2){border:0}.bottom-inner{display:block}.bottom-inner span{display:block;margin-top:2px}.bottom-actions{margin-top:8px}.bottom-actions .btn{flex:1}
}
@media(max-width:480px){
 .brand-name{max-width:145px;overflow:hidden;text-overflow:ellipsis}.category-strip{grid-template-columns:1fr}
 .filter-bar{display:block}.filter-status{margin-top:10px}.poster-art{height:205px}.poster-title{font-size:21px}
 .footer-grid{grid-template-columns:1fr 1fr;gap:25px 15px}.footer-grid>div:first-child{grid-column:1/-1}
 .copyright{line-height:1.8}.assurance-grid{grid-template-columns:1fr}.assurance-item{border-right:0;border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:14px}
}

/* roulang page: category2 */
:root{
      --berry:#542348;
      --berry-deep:#35152f;
      --orange:#ef714d;
      --apricot:#ffd8a8;
      --cream:#fff9ef;
      --paper:#fffdf8;
      --ink:#29242b;
      --muted:#746d73;
      --line:#eaded2;
      --blue:#6972d8;
      --green:#4f9a72;
      --shadow:0 18px 45px rgba(73,35,54,.11);
      --radius:16px;
      --container:1200px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:"思源黑体","苹方","Microsoft YaHei",Arial,sans-serif;
      color:var(--ink);
      background:var(--cream);
      line-height:1.7;
      padding-bottom:76px;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button{font:inherit;border:0;cursor:pointer}
    .container{width:min(var(--container),calc(100% - 40px));margin:auto}
    .site-header{
      height:76px;
      position:sticky;
      top:0;
      z-index:20;
      background:rgba(255,249,239,.95);
      backdrop-filter:blur(14px);
      border-bottom:1px solid rgba(234,222,210,.8);
    }
    .nav-wrap{
      height:76px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:28px;
    }
    .brand{display:flex;align-items:center;gap:11px;font-weight:800;white-space:nowrap}
    .logo-mark{
      width:38px;height:38px;background:var(--berry);color:#fff;
      border-radius:11px 11px 11px 4px;display:grid;place-items:center;
      font-size:19px;box-shadow:4px 4px 0 var(--orange)
    }
    .brand-name{font-size:17px;letter-spacing:.2px}
    .nav-list{display:flex;align-items:center;gap:25px;font-size:14px;color:#62575f}
    .nav-list a{padding:8px 0;position:relative}
    .nav-list a:after{
      content:"";position:absolute;left:0;right:100%;bottom:1px;height:2px;
      background:var(--orange);transition:.25s
    }
    .nav-list a:hover,.nav-list a.active{color:var(--berry)}
    .nav-list a:hover:after,.nav-list a.active:after{right:0}
    .nav-cta{
      padding:10px 17px!important;background:var(--berry);color:#fff!important;
      border-radius:10px
    }
    .nav-cta:after{display:none}
    .menu-toggle{
      display:none;background:var(--berry);color:#fff;border-radius:9px;
      padding:8px 11px
    }
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:8px;
      padding:13px 22px;border-radius:11px;font-weight:700;transition:.25s;
      border:1px solid transparent
    }
    .btn-primary{background:var(--berry);color:#fff;box-shadow:0 8px 18px rgba(84,35,72,.2)}
    .btn-primary:hover{background:#71305d;transform:translateY(-2px)}
    .btn-light{background:#fff8ef;border-color:#d9c7bd;color:var(--berry)}
    .btn-light:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-2px)}
    .btn:focus,.nav-list a:focus,.menu-toggle:focus,summary:focus{
      outline:3px solid rgba(239,113,77,.4);outline-offset:3px
    }
    .page-intro{
      padding:70px 0 62px;
      background:
        radial-gradient(circle at 84% 20%,rgba(239,113,77,.18),transparent 23%),
        linear-gradient(135deg,#fff9ef 0%,#ffe7c5 100%);
      border-bottom:1px solid #f0d6bf;
    }
    .crumbs{font-size:13px;color:var(--muted);margin-bottom:26px}
    .crumbs a{color:var(--berry);font-weight:700}
    .intro-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:end}
    .eyebrow,.section-kicker{
      color:var(--orange);font-size:13px;font-weight:800;letter-spacing:2px
    }
    .page-intro h1{
      margin:14px 0 17px;color:var(--berry);font-size:clamp(34px,5vw,61px);
      line-height:1.15;letter-spacing:-1.5px
    }
    .page-intro h1 em{font-style:normal;color:var(--orange)}
    .intro-copy{max-width:650px;color:var(--muted);font-size:16px}
    .intro-note{
      padding:24px 26px;background:rgba(255,253,248,.78);
      border:1px solid #edd8c4;border-radius:17px;box-shadow:var(--shadow)
    }
    .intro-note strong{display:block;color:var(--berry);font-size:20px;margin-bottom:6px}
    .intro-note p{margin:0;color:var(--muted);font-size:14px}
    section{padding:78px 0}
    .section-head{
      display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:30px
    }
    .section-head h2{
      margin:0;font-size:clamp(25px,3vw,38px);line-height:1.25;
      color:var(--berry);letter-spacing:-.8px
    }
    .section-head p{max-width:590px;color:var(--muted);font-size:14px;margin:0}
    .section-kicker{margin-bottom:8px}
    .filter-bar{
      display:flex;align-items:center;justify-content:space-between;gap:18px;
      padding:14px;background:var(--paper);border:1px solid var(--line);
      border-radius:14px;box-shadow:0 8px 20px rgba(73,35,54,.05)
    }
    .filter-list{display:flex;flex-wrap:wrap;gap:8px}
    .filter-chip{
      padding:8px 15px;border:1px solid var(--line);background:#fffaf3;
      border-radius:9px;color:var(--muted);font-size:13px;transition:.2s
    }
    .filter-chip:hover,.filter-chip.selected{background:var(--berry);border-color:var(--berry);color:#fff}
    .filter-result{color:var(--muted);font-size:13px;white-space:nowrap}
    .poster-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px 17px}
    .poster-card{min-width:0}
    .poster-visual{
      aspect-ratio:3/4;
      border-radius:15px 15px 15px 5px;
      overflow:hidden;position:relative;padding:16px;
      color:#fff;background:linear-gradient(145deg,#542348,#8a426c);
      box-shadow:0 12px 23px rgba(73,35,54,.12);
      transition:.25s
    }
    .poster-card:nth-child(2n) .poster-visual{background:linear-gradient(145deg,#303b67,#6972d8)}
    .poster-card:nth-child(3n) .poster-visual{background:linear-gradient(145deg,#9a4d42,#ef714d)}
    .poster-card:nth-child(4n) .poster-visual{background:linear-gradient(145deg,#315c58,#4f9a72)}
    .poster-visual:before{
      content:"";position:absolute;width:180px;height:180px;right:-42px;top:28px;
      border-radius:48% 52% 60% 40%;background:rgba(255,216,168,.58);transform:rotate(22deg)
    }
    .poster-visual:after{
      content:"";position:absolute;left:15px;right:15px;bottom:14px;height:1px;
      background:rgba(255,255,255,.45)
    }
    .poster-card:hover .poster-visual{transform:translateY(-5px);box-shadow:var(--shadow)}
    .poster-index{position:relative;z-index:1;font-size:12px;opacity:.85}
    .poster-title{
      position:absolute;z-index:1;left:16px;right:16px;bottom:43px;
      font-size:24px;line-height:1.2;font-weight:900
    }
    .poster-sub{position:absolute;z-index:1;left:16px;bottom:20px;font-size:12px;color:#ffe8d6}
    .poster-info{padding:11px 2px}
    .poster-info h3{margin:0;color:var(--berry);font-size:17px}
    .poster-meta{display:flex;justify-content:space-between;gap:6px;color:var(--muted);font-size:12px;margin-top:5px}
    .badge{display:inline-block;padding:2px 7px;border-radius:5px;font-size:11px;font-weight:800}
    .badge-blue{background:#e9eaff;color:#5159b7}
    .badge-orange{background:#ffe1c7;color:#c15432}
    .badge-green{background:#dff1e4;color:#397551}
    .popular-band{background:#35152f;color:#fff}
    .popular-band .section-head h2{color:#fff}
    .popular-band .section-head p{color:#dfcbd5}
    .popular-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
    .popular-main{
      min-height:300px;border-radius:18px;padding:30px;display:flex;
      flex-direction:column;justify-content:end;position:relative;overflow:hidden;
      background:linear-gradient(135deg,#71305d,#ef714d)
    }
    .popular-main:before{
      content:"";position:absolute;width:300px;height:300px;right:-78px;top:-90px;
      border-radius:50%;background:rgba(255,216,168,.5)
    }
    .popular-main>*{position:relative;z-index:1}
    .popular-main h3{font-size:32px;margin:8px 0 3px}
    .popular-main p{max-width:480px;color:#ffe6db;font-size:14px;margin:0}
    .popular-side{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .popular-item{
      padding:19px;background:#4b2041;border:1px solid rgba(255,255,255,.13);
      border-radius:13px;transition:.2s
    }
    .popular-item:hover{border-color:var(--orange);transform:translateY(-3px)}
    .popular-item h3{font-size:17px;margin:14px 0 5px;color:#fff}
    .popular-item p{margin:0;color:#dcc5d1;font-size:12px}
    .category-strip{
      display:flex;align-items:stretch;gap:14px;overflow:auto;padding-bottom:5px
    }
    .category-tag{
      min-width:210px;padding:20px;background:var(--paper);
      border-top:5px solid var(--orange);border-radius:12px;border-left:1px solid var(--line);
      border-right:1px solid var(--line);border-bottom:1px solid var(--line)
    }
    .category-tag:nth-child(2){border-top-color:var(--blue)}
    .category-tag:nth-child(3){border-top-color:var(--green)}
    .category-tag:nth-child(4){border-top-color:#9a5e86}
    .category-tag b{display:block;color:var(--berry);font-size:18px;margin-bottom:7px}
    .category-tag span{display:block;color:var(--muted);font-size:13px}
    .timeline{
      border-left:2px solid #e7c9b6;margin-left:10px;padding-left:28px;
      display:grid;gap:22px
    }
    .timeline-item{position:relative;display:grid;grid-template-columns:110px 1fr;gap:22px;align-items:start}
    .timeline-item:before{
      content:"";position:absolute;width:10px;height:10px;border-radius:50%;
      background:var(--orange);left:-34px;top:8px;box-shadow:0 0 0 5px #ffe8d5
    }
    .timeline-date{font-size:13px;font-weight:800;color:var(--orange)}
    .timeline-content{padding-bottom:17px;border-bottom:1px dashed #dfcfc2}
    .timeline-content h3{margin:0 0 4px;color:var(--berry);font-size:18px}
    .timeline-content p{margin:0;color:var(--muted);font-size:14px}
    .rank-section{background:#fff2df}
    .rank-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px 38px}
    .rank-item{
      display:grid;grid-template-columns:42px 1fr auto auto;align-items:center;
      gap:12px;padding:14px 0;border-bottom:1px solid #ead9c9
    }
    .rank-number{font-size:25px;font-weight:900;color:#d39d72}
    .rank-item:nth-child(-n+3) .rank-number{color:var(--orange)}
    .rank-name{font-weight:800;color:var(--berry)}
    .rank-label{font-size:11px;color:var(--muted);background:#fffaf3;border-radius:5px;padding:3px 7px}
    .rank-score{font-size:13px;font-weight:800;color:var(--orange)}
    .faq-list{max-width:900px;margin:auto;display:grid;gap:12px}
    details{
      background:var(--paper);border:1px solid var(--line);border-radius:12px;
      padding:0 20px;transition:.2s
    }
    details[open]{border-color:#e7b59e;box-shadow:0 8px 22px rgba(73,35,54,.06)}
    summary{cursor:pointer;list-style:none;padding:18px 28px 18px 0;font-weight:800;color:var(--berry);position:relative}
    summary::-webkit-details-marker{display:none}
    summary:after{content:"+";position:absolute;right:2px;color:var(--orange);font-size:22px;top:13px}
    details[open] summary:after{content:"−"}
    details p{margin:-4px 0 18px;color:var(--muted);font-size:14px}
    .cta-band{padding:0 0 82px}
    .cta-box{
      display:flex;justify-content:space-between;align-items:center;gap:30px;
      padding:32px 36px;background:var(--berry);color:#fff;
      border-radius:18px 18px 18px 5px;box-shadow:var(--shadow)
    }
    .cta-box h2{margin:0 0 5px;font-size:27px}
    .cta-box p{margin:0;color:#e9d6df;font-size:14px}
    .cta-box .btn-light{background:#fff8ef;color:var(--berry);border-color:#fff8ef}
    .site-footer{padding:55px 0 30px;background:#261b25;color:#fff}
    .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:35px}
    .footer-brand{font-size:20px;font-weight:900;margin-bottom:10px}
    .footer-desc{color:#c9b9c0;font-size:13px;max-width:290px;margin:0}
    .site-footer h3{font-size:14px;margin:0 0 13px;color:#ffd8a8}
    .site-footer a{display:block;color:#c9b9c0;font-size:13px;margin:7px 0;transition:.2s}
    .site-footer a:hover{color:#fff}
    .copyright{
      border-top:1px solid rgba(255,255,255,.12);margin-top:36px;padding-top:20px;
      color:#a997a1;font-size:12px
    }
    .fixed-bar{
      position:fixed;z-index:30;left:0;right:0;bottom:0;padding:10px 0;
      background:rgba(53,21,47,.96);color:#fff;box-shadow:0 -8px 25px rgba(45,19,39,.18)
    }
    .fixed-inner{display:flex;justify-content:space-between;align-items:center;gap:20px}
    .fixed-inner strong{font-size:14px}
    .fixed-inner span{font-size:12px;color:#e0cbd4;margin-left:10px}
    .fixed-actions{display:flex;gap:9px}
    .fixed-actions .btn{padding:9px 15px;font-size:13px}
    @media (max-width:1024px){
      .nav-list{gap:14px}
      .intro-grid{gap:35px}
      .poster-grid{grid-template-columns:repeat(3,1fr)}
      .footer-grid{grid-template-columns:1.3fr 1fr 1fr}
    }
    @media (max-width:768px){
      body{padding-bottom:118px}
      .container{width:min(var(--container),calc(100% - 28px))}
      .site-header,.nav-wrap{height:66px}
      .brand-name{font-size:15px}
      .menu-toggle{display:block}
      .nav-list{
        display:none;position:absolute;top:66px;left:14px;right:14px;
        padding:14px;background:#fff9ef;border:1px solid var(--line);
        border-radius:13px;box-shadow:var(--shadow);align-items:stretch;flex-direction:column;gap:2px
      }
      .nav-list.open{display:flex}
      .nav-list a{padding:10px 12px}
      .nav-cta{margin-top:4px;text-align:center}
      .intro-grid{grid-template-columns:1fr;gap:25px}
      .page-intro{padding:48px 0 52px}
      .page-intro h1{font-size:39px}
      section{padding:57px 0}
      .section-head{display:block}
      .section-head p{margin-top:10px}
      .filter-bar{display:block}
      .filter-result{margin-top:10px}
      .poster-grid{grid-template-columns:repeat(2,1fr);gap:20px 12px}
      .popular-grid{grid-template-columns:1fr}
      .popular-side{grid-template-columns:1fr 1fr}
      .timeline-item{grid-template-columns:1fr;gap:2px}
      .rank-grid{grid-template-columns:1fr}
      .cta-box{display:block;padding:27px 24px}
      .cta-box .btn{margin-top:20px}
      .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
      .fixed-inner{display:block}
      .fixed-inner span{display:block;margin:2px 0 8px}
      .fixed-actions .btn{padding:8px 13px}
    }
    @media (max-width:480px){
      .poster-title{font-size:20px}
      .popular-side{grid-template-columns:1fr}
      .category-tag{min-width:180px}
      .footer-grid{grid-template-columns:1fr}
      .fixed-actions{width:100%}
      .fixed-actions .btn{flex:1}
    }

/* roulang page: category3 */
:root{--berry:#542348;--berry-deep:#35152f;--orange:#ef714d;--apricot:#ffd8a8;--cream:#fff9ef;--paper:#fffdf8;--ink:#29242b;--muted:#746d73;--line:#eaded2;--blue:#6972d8;--green:#4f9a72;--shadow:0 18px 45px rgba(73,35,54,.11);--radius:16px;--container:1200px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;padding-bottom:78px;font-family:"思源黑体","苹方","Microsoft YaHei",Arial,sans-serif;color:var(--ink);background:var(--cream);line-height:1.7}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button{font:inherit;border:0;cursor:pointer}.container{width:min(var(--container),calc(100% - 40px));margin:auto}
.site-header{height:76px;position:sticky;top:0;z-index:20;background:rgba(255,249,239,.95);backdrop-filter:blur(14px);border-bottom:1px solid rgba(234,222,210,.8)}.nav-wrap{height:76px;display:flex;align-items:center;justify-content:space-between;gap:28px}.brand{display:flex;align-items:center;gap:11px;font-weight:800;white-space:nowrap}.logo-mark{width:38px;height:38px;background:var(--berry);color:#fff;border-radius:11px 11px 11px 4px;display:grid;place-items:center;font-size:19px;box-shadow:4px 4px 0 var(--orange)}.brand-name{font-size:17px}.nav-list{display:flex;align-items:center;gap:25px;font-size:14px;color:#62575f}.nav-list a{padding:8px 0;position:relative}.nav-list a:after{content:"";position:absolute;left:0;right:100%;bottom:1px;height:2px;background:var(--orange);transition:.25s}.nav-list a:hover,.nav-list a.active{color:var(--berry)}.nav-list a:hover:after,.nav-list a.active:after{right:0}.nav-cta{padding:10px 17px!important;background:var(--berry);color:#fff!important;border-radius:10px}.nav-cta:after{display:none}.menu-toggle{display:none;background:var(--berry);color:#fff;border-radius:9px;padding:8px 11px}
main{overflow:hidden}.page-intro{padding:68px 0 54px;background:linear-gradient(135deg,#fff9ef,#ffe7c5)}.crumb{font-size:13px;color:var(--muted);margin-bottom:22px}.crumb a{color:var(--berry)}.intro-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:end}.eyebrow,.section-kicker{color:var(--orange);font-size:13px;font-weight:800;letter-spacing:2px}.page-intro h1{font-size:clamp(34px,5vw,58px);line-height:1.18;color:var(--berry);margin:14px 0 18px;letter-spacing:-1.5px}.page-intro h1 em{font-style:normal;color:var(--orange)}.intro-copy{max-width:650px;color:var(--muted);font-size:16px}.intro-note{background:var(--berry);color:#fff;border-radius:18px 18px 18px 6px;padding:26px;box-shadow:var(--shadow);position:relative}.intro-note:after{content:"情感";position:absolute;right:22px;top:18px;color:#f7b189;font-size:42px;font-weight:900;opacity:.55}.intro-note strong{font-size:25px;display:block;margin-bottom:8px}.intro-note p{color:#f1dce4;font-size:13px;margin:0;max-width:260px}
section{padding:78px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:28px}.section-head h2{margin:0;color:var(--berry);font-size:clamp(25px,3vw,37px);line-height:1.25}.section-head p{max-width:570px;color:var(--muted);font-size:14px;margin:0}.filter-bar{display:flex;gap:10px;flex-wrap:wrap;padding:15px;background:#fffaf3;border:1px solid var(--line);border-radius:13px;margin-bottom:30px}.filter-bar span{padding:7px 15px;border-radius:8px;font-size:13px;color:var(--muted);border:1px solid transparent}.filter-bar span.active{background:var(--berry);color:#fff}.poster-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.poster-card{min-width:0;transition:.25s}.poster-card:hover{transform:translateY(-5px)}.poster{height:255px;border-radius:15px 15px 15px 5px;position:relative;overflow:hidden;padding:16px;color:#fff;background:linear-gradient(145deg,#6d315c,#ef714d)}.poster:before{content:"";position:absolute;width:170px;height:170px;border-radius:50%;right:-55px;top:-35px;background:#ffbe91;opacity:.75}.poster:after{content:"";position:absolute;bottom:-45px;left:-20px;width:160px;height:130px;background:#3b1a38;border-radius:50%}.poster.p2{background:linear-gradient(145deg,#3d416d,#c36b6b)}.poster.p3{background:linear-gradient(145deg,#9a5e48,#542348)}.poster.p4{background:linear-gradient(145deg,#765a91,#ef9166)}.poster.p5{background:linear-gradient(145deg,#4b526f,#d78266)}.poster.p6{background:linear-gradient(145deg,#542348,#a85b79)}.poster.p7{background:linear-gradient(145deg,#b26951,#683553)}.poster.p8{background:linear-gradient(145deg,#4d6670,#d7795b)}.poster-title{position:absolute;z-index:1;left:16px;bottom:20px;font-size:24px;font-weight:900;line-height:1.2}.poster-mark{position:absolute;z-index:1;right:14px;top:14px;border:1px solid rgba(255,255,255,.6);padding:3px 7px;border-radius:5px;font-size:11px}.card-info{padding:12px 2px}.card-info h3{margin:0;color:var(--berry);font-size:17px}.card-meta{display:flex;justify-content:space-between;gap:5px;color:var(--muted);font-size:12px;margin-top:5px}.badge{display:inline-block;padding:2px 7px;border-radius:5px;font-size:11px;font-weight:800}.badge-blue{background:#e9eaff;color:#5159b7}.badge-orange{background:#ffe1c7;color:#c15432}.badge-green{background:#dff1e4;color:#397551}
.recommend{background:#fff1df}.recommend-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:20px}.feature-card{min-height:290px;border-radius:18px;padding:28px;color:#fff;background:linear-gradient(135deg,#542348,#8e4771);position:relative;overflow:hidden}.feature-card:before{content:"";position:absolute;right:-55px;top:-80px;width:260px;height:260px;background:var(--orange);border-radius:50%}.feature-card>*{position:relative;z-index:1}.feature-card h3{font-size:30px;margin:75px 0 5px}.feature-card p{font-size:14px;color:#f5dbe0;max-width:400px}.small-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}.small-item{background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:18px}.small-item h3{font-size:17px;color:var(--berry);margin:12px 0 3px}.small-item p{font-size:12px;color:var(--muted);margin:0}
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.time-item{border-left:3px solid var(--orange);padding:5px 20px 18px;background:#fffaf3;border-radius:0 12px 12px 0}.time-item b{color:var(--orange);font-size:13px}.time-item h3{color:var(--berry);font-size:18px;margin:8px 0}.time-item p{margin:0;color:var(--muted);font-size:13px}
.rank-layout{display:grid;grid-template-columns:1fr 1fr;gap:30px}.rank-list{margin:0;padding:0;list-style:none}.rank-list li{display:grid;grid-template-columns:38px 1fr auto;gap:13px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}.rank-num{font-weight:900;color:var(--orange);font-size:21px}.rank-list h3{font-size:15px;color:var(--berry);margin:0}.rank-list small{display:block;color:var(--muted);font-size:11px}.score{font-weight:800;color:var(--berry);font-size:13px}
.faq-section{background:#fff1df}.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.faq-item{background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:20px 22px}.faq-item h3{font-size:16px;color:var(--berry);margin:0 0 8px}.faq-item p{font-size:13px;color:var(--muted);margin:0}
.news-strip{display:grid;grid-template-columns:1.1fr .9fr;gap:28px}.news-main{background:var(--berry);color:#fff;border-radius:18px;padding:30px;min-height:220px}.news-main h3{font-size:25px;margin:35px 0 8px}.news-main p{color:#edd9e3;font-size:13px}.news-list{list-style:none;padding:0;margin:0}.news-list li{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--berry)}.news-list time{color:var(--muted);font-size:12px;white-space:nowrap}
.cta-band{padding:32px 0;background:var(--berry-deep);color:#fff}.cta-flex{display:flex;justify-content:space-between;align-items:center;gap:20px}.cta-band h2{font-size:25px;margin:0 0 4px}.cta-band p{margin:0;color:#e8ccd9;font-size:13px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:11px;font-weight:700;transition:.25s;border:1px solid transparent}.btn-primary{background:var(--berry);color:#fff;box-shadow:0 8px 18px rgba(84,35,72,.2)}.btn-primary:hover{background:#71305d;transform:translateY(-2px)}.btn-light{background:#fff8ef;border-color:#d9c7bd;color:var(--berry)}.btn-light:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-2px)}.btn:focus,.nav-list a:focus,.menu-toggle:focus{outline:3px solid rgba(239,113,77,.4);outline-offset:3px}
.site-footer{background:#251525;color:#fff;padding:55px 0 25px}.footer-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:35px}.footer-brand{font-weight:800;font-size:19px}.footer-desc{color:#cdbbc7;font-size:13px;max-width:245px}.site-footer h3{font-size:14px;margin:0 0 13px;color:#f5c3a7}.site-footer a{display:block;color:#cdbbc7;font-size:13px;margin:7px 0;transition:.2s}.site-footer a:hover{color:#fff0d6;transform:translateX(3px)}.copyright{border-top:1px solid rgba(255,255,255,.15);margin-top:38px;padding-top:18px;color:#aa96a4;font-size:12px}
.bottom-bar{position:fixed;z-index:30;bottom:0;left:0;right:0;background:rgba(53,21,47,.96);color:#fff;padding:11px 0;box-shadow:0 -8px 25px rgba(53,21,47,.16)}.bottom-flex{display:flex;justify-content:space-between;align-items:center;gap:20px}.bottom-flex span{font-size:13px;color:#f1dce4}.bottom-actions{display:flex;gap:10px}.bottom-actions .btn{padding:9px 16px;font-size:13px}
@media(max-width:1024px){.nav-list{gap:13px}.intro-grid,.recommend-grid,.news-strip{gap:28px}.poster-grid{grid-template-columns:repeat(3,1fr)}.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){body{padding-bottom:116px}.container{width:min(var(--container),calc(100% - 28px))}.site-header,.nav-wrap{height:68px}.nav-list{display:none;position:absolute;top:68px;left:14px;right:14px;padding:16px;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch;gap:3px}.nav-list.open{display:flex}.nav-list a{padding:10px 8px}.nav-cta{text-align:center}.menu-toggle{display:block}.brand-name{font-size:15px}.page-intro{padding:46px 0 42px}.intro-grid,.recommend-grid,.news-strip,.rank-layout{grid-template-columns:1fr}.intro-note{max-width:430px}.poster-grid{grid-template-columns:repeat(2,1fr);gap:17px}.poster{height:230px}section{padding:58px 0}.section-head{display:block}.section-head p{margin-top:10px}.timeline,.faq-grid{grid-template-columns:1fr}.small-list{grid-template-columns:1fr 1fr}.cta-flex{display:block}.cta-flex .btn{margin-top:18px}.bottom-flex{display:block}.bottom-flex span{display:block;margin-bottom:8px}.bottom-actions .btn{width:50%}}
@media(max-width:480px){.brand-name{font-size:14px}.logo-mark{width:34px;height:34px}.intro-note{padding:21px}.poster{height:205px}.poster-title{font-size:20px}.small-list{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr;gap:22px}.copyright{line-height:1.7}.bottom-actions{gap:7px}.bottom-actions .btn{padding:8px 5px;font-size:12px}}