/* roulang page: index */
:root{
  --bg:#130d18;
  --bg-deep:#0d0911;
  --panel:#211729;
  --panel-2:#2a1c34;
  --panel-3:#31213c;
  --line:#4b3655;
  --line-soft:rgba(216,187,221,.14);
  --text:#f8f0f7;
  --muted:#c6b6c8;
  --muted-2:#947f98;
  --berry:#e85072;
  --berry-dark:#bd3458;
  --coral:#ff765f;
  --apricot:#ffc775;
  --mint:#63d1af;
  --danger:#ff8495;
  --shadow:0 20px 50px rgba(0,0,0,.28);
  --radius:14px;
  --radius-sm:10px;
  --max:1280px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",Arial,sans-serif;font-size:15px;line-height:1.65;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.18;background-image:radial-gradient(rgba(255,255,255,.25) .6px,transparent .7px);background-size:6px 6px;mask-image:linear-gradient(to bottom,black,transparent 70%);z-index:-1}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--apricot);outline-offset:3px}
.container{width:min(var(--max),calc(100% - 48px));margin:auto}
.topline{background:#0b0810;border-bottom:1px solid var(--line-soft);font-size:12px;color:var(--muted)}
.topline-inner{min-height:32px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.live-note,.top-meta{display:flex;align-items:center;gap:8px;white-space:nowrap}
.status-dot{width:8px;height:8px;background:var(--mint);border-radius:50%;box-shadow:0 0 0 4px rgba(99,209,175,.12)}
.top-meta{color:var(--muted-2)}
.site-header{position:sticky;top:0;z-index:50;background:rgba(19,13,24,.96);border-bottom:1px solid var(--line-soft);backdrop-filter:blur(12px)}
.navbar{height:70px;display:flex;align-items:center;gap:28px}
.logo{font-size:16px;font-weight:900;letter-spacing:-.5px;line-height:1.2;max-width:230px}
.logo b{display:block;color:var(--berry);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:2px}
.nav-links{display:flex;align-items:stretch;gap:4px;flex:1}
.nav-links a{position:relative;padding:22px 13px 19px;color:var(--muted);font-size:14px;font-weight:700;transition:.2s}
.nav-links a:hover{color:var(--text);background:rgba(255,255,255,.03)}
.nav-links a.active{color:var(--text)}
.nav-links a.active:after{content:"";position:absolute;left:13px;right:13px;bottom:10px;height:3px;border-radius:8px;background:var(--berry)}
.nav-actions{display:flex;align-items:center;gap:10px}
.icon-button{width:38px;height:38px;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:10px;display:grid;place-items:center;position:relative;transition:.2s}
.icon-button:hover{transform:translateY(-1px);border-color:var(--berry);background:var(--panel-2)}
.notice{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--coral);right:8px;top:8px}
.btn{border:1px solid transparent;min-height:42px;padding:0 17px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:14px;transition:transform .18s,background .18s,border .18s,box-shadow .18s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--berry);color:white;box-shadow:0 8px 22px rgba(232,80,114,.22)}
.btn-primary:hover{background:#f25e7d;box-shadow:0 10px 26px rgba(232,80,114,.33)}
.btn-secondary{background:transparent;border-color:var(--line);color:var(--text)}
.btn-secondary:hover{border-color:var(--apricot);background:rgba(255,199,117,.08)}
.mobile-menu{display:none}
.hero{padding:42px 0 0;position:relative}
.hero-shell{border:1px solid var(--line);background:linear-gradient(118deg,#2d1934 0%,#201528 52%,#151019 100%);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);position:relative}
.hero-shell:after{content:"";position:absolute;width:50%;height:170%;right:-18%;top:-35%;background:repeating-linear-gradient(135deg,rgba(255,118,95,.10) 0 1px,transparent 1px 24px);transform:rotate(10deg);pointer-events:none}
.hero-head{position:relative;z-index:1;padding:16px 24px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;justify-content:space-between;gap:12px}
.hero-kicker{font-size:12px;color:var(--apricot);letter-spacing:1.4px;font-weight:900}
.refresh{font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:center}
.refresh i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--mint)}
.hero-content{position:relative;z-index:1;padding:42px 48px 35px;display:grid;grid-template-columns:1.1fr .9fr;gap:42px;align-items:center}
.hero-copy h1{font-size:clamp(30px,4vw,48px);line-height:1.15;letter-spacing:-2px;margin:0 0 18px;font-weight:950;max-width:720px}
.hero-copy h1 span{display:block;color:var(--coral)}
.hero-copy p{max-width:700px;color:var(--muted);font-size:16px;margin:0 0 25px}
.hero-points{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:25px}
.point{padding:6px 10px;border:1px solid var(--line);background:rgba(9,6,13,.25);border-radius:999px;font-size:12px;color:#e5d5e6}
.searchbar{background:#110c16;border:1px solid #62476b;border-radius:12px;padding:7px;display:flex;gap:8px;max-width:670px}
.searchbar input{border:0;background:transparent;color:var(--text);padding:8px 10px;outline:none;min-width:0;flex:1}
.searchbar input::placeholder{color:var(--muted-2)}
.searchbar .btn{min-height:38px}
.hero-buttons{display:flex;gap:11px;flex-wrap:wrap;margin-top:16px}
.feature-panel{background:#120d17;border:1px solid rgba(255,199,117,.28);border-radius:14px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.media-cover{min-height:190px;padding:18px;background:linear-gradient(140deg,rgba(232,80,114,.68),rgba(34,19,43,.6) 48%,rgba(255,118,95,.42)),linear-gradient(45deg,#402149,#1a1121);position:relative;display:flex;align-items:flex-end}
.cover-pattern{position:absolute;inset:0;opacity:.43;background:linear-gradient(90deg,transparent 49%,rgba(255,255,255,.1) 50%,transparent 51%),linear-gradient(0deg,transparent 49%,rgba(255,255,255,.08) 50%,transparent 51%);background-size:36px 36px}
.play-mark{width:55px;height:55px;border:1px solid rgba(255,255,255,.65);border-radius:50%;display:grid;place-items:center;background:rgba(19,13,24,.45);font-size:20px;position:relative;z-index:1}
.media-caption{position:relative;z-index:1;margin-left:14px}
.media-caption small{color:#fff0db;font-weight:800;letter-spacing:1px}
.media-caption strong{font-size:19px;display:block;line-height:1.35}
.feature-info{padding:15px 17px}
.feature-info h2{font-size:16px;margin:0 0 10px}
.meta-row{display:flex;flex-wrap:wrap;gap:7px}
.meta{font-size:11px;color:var(--muted);padding:3px 7px;border:1px solid var(--line);border-radius:5px}
.meta.available{border-color:rgba(99,209,175,.42);color:#9be8cf}
.hero-status{position:relative;z-index:2;border-top:1px solid var(--line-soft);display:grid;grid-template-columns:repeat(4,1fr);background:rgba(5,3,8,.25)}
.status-box{padding:13px 20px;border-right:1px solid var(--line-soft);font-size:12px;color:var(--muted)}
.status-box:last-child{border:0}.status-box b{color:var(--text);font-size:14px;margin-right:5px}
.section{padding:70px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:26px}
.eyebrow{color:var(--coral);font-weight:900;font-size:12px;letter-spacing:1.5px;margin-bottom:6px}
.section-head h2{font-size:clamp(23px,3vw,30px);line-height:1.25;margin:0;font-weight:900;letter-spacing:-1px}
.section-head p{color:var(--muted);max-width:610px;margin:7px 0 0;font-size:14px}
.text-link{font-size:14px;color:var(--apricot);white-space:nowrap;font-weight:800}
.text-link:hover{text-decoration:underline}
.entry-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:15px}
.feature-entry{min-height:220px;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);padding:24px;background:linear-gradient(135deg,#382041,#25182d);transition:.22s}
.feature-entry:nth-child(2){background:linear-gradient(135deg,#3b2533,#251823)}
.feature-entry:hover,.media-card:hover{transform:translateY(-4px);border-color:#8a5a85;box-shadow:var(--shadow)}
.entry-no{font-size:12px;color:var(--apricot);font-weight:900;letter-spacing:1px}
.feature-entry h3{font-size:24px;margin:34px 0 7px}.feature-entry p{color:var(--muted);max-width:310px;margin:0;font-size:14px}
.entry-count{position:absolute;right:18px;bottom:18px;color:#e7d8e7;font-weight:800;font-size:12px}
.entry-arrow{font-size:22px;color:var(--berry);margin-left:5px}
.quick-filters{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:15px}
.filter-chip{border:1px solid var(--line);padding:12px 13px;border-radius:10px;background:var(--panel);display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:13px;transition:.2s}
.filter-chip:hover{border-color:var(--berry);color:var(--text);background:var(--panel-2)}
.data-band{background:#0d0911;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.data-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center}
.trend-panel{background:var(--panel);border:1px solid var(--line);padding:20px;border-radius:var(--radius)}
.trend-title{display:flex;justify-content:space-between;margin-bottom:16px;font-weight:800}
.trend-title span{font-size:12px;color:var(--mint)}
.bars{height:76px;display:flex;gap:8px;align-items:end}
.bars i{display:block;flex:1;min-width:8px;background:linear-gradient(to top,var(--berry),var(--coral));border-radius:5px 5px 2px 2px;opacity:.9}
.stats-inline{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stat{border-left:3px solid var(--berry);padding:6px 0 6px 12px}
.stat:nth-child(2){border-color:var(--apricot)}.stat:nth-child(3){border-color:var(--mint)}
.stat b{font-size:26px;line-height:1;display:block}.stat span{font-size:12px;color:var(--muted)}
.recommend-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
.media-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);overflow:hidden;transition:.2s}
.wide-media{min-height:355px;display:flex;flex-direction:column}
.poster{position:relative;overflow:hidden;background:linear-gradient(145deg,#4a203d,#2a1c39 46%,#14262a);min-height:190px}
.poster:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(110deg,transparent 0 22px,rgba(255,255,255,.05) 23px 24px)}
.poster .corner{position:absolute;top:13px;left:13px;background:var(--berry);padding:4px 8px;border-radius:4px;font-size:11px;font-weight:900}
.poster .poster-label{position:absolute;bottom:13px;left:15px;font-weight:900;font-size:22px;text-shadow:0 2px 10px #000}
.wide-media .poster{flex:1}.card-copy{padding:17px}.card-copy h3{font-size:18px;margin:0 0 7px}.card-copy p{font-size:13px;color:var(--muted);margin:0 0 12px}
.rank-list{display:grid;gap:10px}
.rank-item{display:grid;grid-template-columns:40px 78px 1fr;gap:10px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);transition:.2s}
.rank-item:hover{background:var(--panel-2);border-color:#865d87;transform:translateX(3px)}
.rank-num{font-size:18px;color:var(--apricot);font-weight:900}
.rank-thumb{height:57px;border-radius:7px;background:linear-gradient(135deg,#613247,#262039);position:relative;overflow:hidden}
.rank-thumb:after{content:"";position:absolute;width:120%;height:2px;background:rgba(255,255,255,.25);top:50%;transform:rotate(-28deg)}
.rank-item h3{font-size:14px;margin:0 0 2px}.rank-item p{margin:0;color:var(--muted-2);font-size:11px}
.browse-panel{display:grid;grid-template-columns:270px 1fr;gap:16px}
.filter-side{background:#110c16;border:1px solid var(--line);border-radius:var(--radius);padding:19px}
.filter-side h3{font-size:16px;margin:0 0 15px}.filter-group{padding:14px 0;border-top:1px solid var(--line-soft)}.filter-group b{font-size:13px;display:block;margin-bottom:10px}
.check{display:flex;align-items:center;gap:8px;margin:8px 0;color:var(--muted);font-size:13px;cursor:pointer}.check input{accent-color:var(--berry)}
.result-area{border:1px solid var(--line);border-radius:var(--radius);padding:19px;background:var(--panel)}
.result-top{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid var(--line-soft);padding-bottom:14px;margin-bottom:14px}
.result-top strong{font-size:15px}.result-top span{font-size:12px;color:var(--muted)}
.preview-list{display:grid;grid-template-columns:1.3fr .7fr;gap:12px}.preview-wide,.preview-small{border-radius:10px;min-height:142px;padding:16px;position:relative;overflow:hidden}
.preview-wide{background:linear-gradient(120deg,#5b2746,#2c1d3c);border-left:4px solid var(--berry)}.preview-small{background:#17111d;border:1px solid var(--line)}
.preview-wide b,.preview-small b{display:block;font-size:16px;margin-bottom:5px}.preview-wide span,.preview-small span{color:var(--muted);font-size:12px}
.guide-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.step{position:relative;padding:19px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.step-no{font-size:12px;color:var(--apricot);font-weight:900}.step h3{font-size:16px;margin:24px 0 7px}.step p{font-size:13px;color:var(--muted);margin:0}
.step:after{content:"→";position:absolute;right:-12px;top:50%;z-index:2;color:var(--coral);font-size:20px}.step:last-child:after{display:none}
.news-layout{display:grid;grid-template-columns:1.3fr .7fr;gap:16px}
.news-list{border-top:1px solid var(--line)}
.news-item{display:grid;grid-template-columns:94px 1fr auto;gap:16px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line-soft)}
.date{font-size:12px;color:var(--apricot);font-weight:800}.news-item h3{font-size:16px;margin:0 0 3px}.news-item p{font-size:13px;margin:0;color:var(--muted)}.news-item a{font-size:13px;color:var(--berry);font-weight:800}
.notice-panel{border:1px solid #674c46;background:linear-gradient(135deg,#30202a,#1e171e);border-radius:var(--radius);padding:22px}.notice-panel h3{margin:0 0 8px;font-size:19px}.notice-panel p{color:var(--muted);font-size:14px;margin:0 0 16px}
.faq-wrap{display:grid;grid-template-columns:.75fr 1.25fr;gap:42px;align-items:start}
.faq-intro{position:sticky;top:100px}.faq-intro h2{font-size:30px;line-height:1.25;margin:0 0 12px}.faq-intro p{color:var(--muted);margin:0}
.faq-item{border-bottom:1px solid var(--line);background:transparent}
.faq-question{width:100%;text-align:left;border:0;background:transparent;color:var(--text);padding:19px 38px 19px 0;font-size:16px;font-weight:800;position:relative}
.faq-question:after{content:"+";position:absolute;right:5px;top:15px;font-size:25px;color:var(--coral);font-weight:400;transition:.2s}.faq-question[aria-expanded="true"]:after{transform:rotate(45deg)}
.faq-answer{display:none;padding:0 10px 18px 0;color:var(--muted);font-size:14px}.faq-answer.show{display:block}
.feedback{background:linear-gradient(105deg,#381e37,#1d1525 58%,#172229);border:1px solid #64435b;border-radius:18px;padding:32px;display:grid;grid-template-columns:.8fr 1.2fr;gap:34px}
.feedback h2{font-size:28px;line-height:1.25;margin:0 0 12px}.feedback p{color:var(--muted);margin:0 0 20px}.feedback-tags{display:flex;flex-wrap:wrap;gap:8px}.feedback-tags span{font-size:12px;border:1px solid var(--line);padding:5px 8px;border-radius:999px;color:#e7d9e6}
.feedback-form{display:grid;grid-template-columns:1fr 1fr;gap:11px}.field{display:flex;flex-direction:column;gap:5px}.field.full{grid-column:1/-1}.field label{font-size:12px;color:var(--muted)}.field input,.field select,.field textarea{width:100%;background:#100b15;border:1px solid var(--line);border-radius:8px;color:var(--text);padding:10px;outline:none;transition:.2s}.field textarea{resize:vertical;min-height:82px}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--apricot);box-shadow:0 0 0 3px rgba(255,199,117,.12)}.form-note{grid-column:1/-1;font-size:12px;color:var(--muted)}.form-state{display:none;grid-column:1/-1;background:rgba(99,209,175,.14);border:1px solid rgba(99,209,175,.4);padding:9px;border-radius:7px;color:#a8ead5;font-size:13px}
.age-strip{background:#0b0810;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:15px 0}.age-strip-inner{display:flex;justify-content:space-between;gap:20px;align-items:center}.age-strip p{margin:0;color:var(--muted);font-size:13px}.age-strip strong{color:var(--apricot)}
.site-footer{background:#0a070d;padding:42px 0 22px}.footer-grid{display:grid;grid-template-columns:1.3fr .7fr .7fr;gap:30px;padding-bottom:30px}.footer-brand{font-size:18px;font-weight:900}.footer-brand small{display:block;color:var(--muted);font-size:13px;font-weight:400;margin-top:8px;max-width:360px}.footer-col h3{font-size:13px;color:var(--apricot);margin:0 0 9px}.footer-col a{display:block;color:var(--muted);font-size:13px;margin:6px 0}.footer-col a:hover{color:var(--text)}.copyright{border-top:1px solid var(--line-soft);padding-top:18px;color:var(--muted-2);font-size:12px;display:flex;justify-content:space-between;gap:12px}
.fixed-cta{position:fixed;left:50%;bottom:15px;transform:translateX(-50%);z-index:45;width:min(700px,calc(100% - 28px));background:#29182e;border:1px solid #76445f;box-shadow:0 15px 35px rgba(0,0,0,.38);border-radius:12px;padding:9px 10px 9px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}.fixed-cta span{font-size:13px;color:#eaddea}.fixed-cta .btn{min-height:36px;white-space:nowrap}
@media(max-width:1024px){.nav-links{gap:0}.navbar{gap:12px}.logo{max-width:190px}.hero-content{padding:33px 30px;gap:25px}.guide-grid{grid-template-columns:repeat(2,1fr)}.step:after{display:none}.browse-panel{grid-template-columns:220px 1fr}}
@media(max-width:768px){.container{width:min(100% - 32px,var(--max))}.top-meta{display:none}.navbar{height:62px}.nav-links,.nav-actions .icon-button,.nav-actions .btn{display:none}.nav-actions{margin-left:auto}.mobile-menu{display:grid}.mobile-panel{display:none;padding:12px 16px 17px;border-top:1px solid var(--line-soft);background:#120c17}.mobile-panel.open{display:grid;gap:7px}.mobile-panel a{padding:11px;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-size:14px}.mobile-panel a.active{border-color:var(--berry);color:var(--text)}.hero{padding-top:22px}.hero-content{grid-template-columns:1fr;padding:28px 20px 24px}.feature-panel{max-width:520px}.hero-status{grid-template-columns:repeat(2,1fr)}.status-box:nth-child(2){border-right:0}.entry-layout,.recommend-grid,.news-layout,.faq-wrap,.feedback,.data-grid{grid-template-columns:1fr}.quick-filters{grid-template-columns:repeat(2,1fr)}.browse-panel{grid-template-columns:1fr}.filter-side{display:none}.faq-intro{position:static}.feedback{padding:24px}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
@media(max-width:520px){body{font-size:14px}.hero-head{padding:13px 15px}.refresh{display:none}.hero-copy h1{letter-spacing:-1.4px}.hero-copy p{font-size:14px}.searchbar{flex-wrap:wrap}.searchbar .btn{width:100%}.hero-buttons .btn{flex:1}.status-box{padding:10px 12px}.section{padding:45px 0}.section-head{display:block;margin-bottom:20px}.section-head .text-link{display:inline-block;margin-top:12px}.feature-entry{min-height:180px}.feature-entry h3{margin-top:22px}.quick-filters{grid-template-columns:1fr 1fr}.stats-inline{grid-template-columns:1fr 1fr}.stats-inline .stat:last-child{grid-column:1/-1}.rank-item{grid-template-columns:30px 64px 1fr}.preview-list{grid-template-columns:1fr}.guide-grid{grid-template-columns:1fr}.news-item{grid-template-columns:1fr;gap:5px}.news-item a{margin-top:4px}.feedback-form{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.copyright{display:block}.copyright span{display:block;margin-bottom:5px}.age-strip-inner{align-items:flex-start;flex-direction:column}.fixed-cta span{display:none}.fixed-cta{justify-content:center;padding:8px}.fixed-cta .btn{width:100%}}

/* roulang page: category1 */
:root{
 --bg:#130d18;--bg-deep:#0d0911;--panel:#211729;--panel-2:#2a1c34;
 --panel-3:#31213c;--line:#4b3655;--line-soft:rgba(216,187,221,.14);
 --text:#f8f0f7;--muted:#c6b6c8;--muted-2:#947f98;--berry:#e85072;
 --berry-dark:#bd3458;--coral:#ff765f;--apricot:#ffc775;--mint:#63d1af;
 --danger:#ff8495;--shadow:0 20px 50px rgba(0,0,0,.28);--radius:14px;
 --radius-sm:10px;--max:1280px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",Arial,sans-serif;font-size:15px;line-height:1.65;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.16;background-image:radial-gradient(rgba(255,255,255,.25) .6px,transparent .7px);background-size:6px 6px;mask-image:linear-gradient(to bottom,black,transparent 70%);z-index:-1}
a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}img{max-width:100%;display:block}
.container{width:min(var(--max),calc(100% - 48px));margin:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(19,13,24,.96);border-bottom:1px solid var(--line-soft);backdrop-filter:blur(12px)}
.navbar{height:70px;display:flex;align-items:center;gap:28px}.logo{font-size:16px;font-weight:900;line-height:1.2;max-width:230px;letter-spacing:-.5px}
.logo b{display:block;color:var(--berry);font-size:11px;letter-spacing:1.5px;margin-bottom:2px}
.nav-links{display:flex;align-items:stretch;gap:4px;flex:1}.nav-links a{position:relative;padding:22px 13px 19px;color:var(--muted);font-size:14px;font-weight:700;transition:.2s}
.nav-links a:hover{color:var(--text);background:rgba(255,255,255,.03)}.nav-links a.active{color:var(--text)}
.nav-links a.active:after{content:"";position:absolute;left:13px;right:13px;bottom:10px;height:3px;border-radius:8px;background:var(--berry)}
.nav-actions{display:flex;align-items:center;gap:10px}.live-note{display:flex;align-items:center;gap:7px;color:var(--muted-2);font-size:12px;white-space:nowrap}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(99,209,175,.12)}
.icon-button{width:38px;height:38px;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:10px;display:grid;place-items:center;transition:.2s}
.icon-button:hover{transform:translateY(-1px);border-color:var(--berry);background:var(--panel-2)}
.btn{border:1px solid transparent;min-height:42px;padding:0 17px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:14px;transition:.18s}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0)}.btn:focus-visible,.icon-button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid rgba(255,199,117,.75);outline-offset:3px}
.btn-primary{background:var(--berry);color:#fff;box-shadow:0 8px 22px rgba(232,80,114,.22)}.btn-primary:hover{background:#f25e7d;box-shadow:0 10px 26px rgba(232,80,114,.33)}
.btn-secondary{background:transparent;border-color:var(--line);color:var(--text)}.btn-secondary:hover{border-color:var(--apricot);background:rgba(255,199,117,.08)}
.mobile-menu{display:none}
.page-intro{padding:54px 0 28px}.crumbs{display:flex;gap:9px;align-items:center;color:var(--muted-2);font-size:13px;margin-bottom:20px}.crumbs a:hover{color:var(--apricot)}
.intro-grid{display:grid;grid-template-columns:1fr 360px;gap:35px;align-items:end}.eyebrow{color:var(--coral);font-weight:900;font-size:12px;letter-spacing:1.5px;margin-bottom:7px}
h1{font-size:clamp(30px,4.2vw,48px);line-height:1.16;letter-spacing:-2px;margin:0 0 16px;font-weight:950;max-width:760px}h1 span{color:var(--coral)}
.intro-copy{color:var(--muted);font-size:16px;max-width:760px;margin:0}.intro-aside{border-left:3px solid var(--berry);padding:14px 18px;background:rgba(42,28,52,.58);border-radius:0 10px 10px 0}
.intro-aside strong{display:block;font-size:25px;color:var(--apricot);line-height:1.1}.intro-aside small{color:var(--muted)}
.toolbar{border:1px solid var(--line);background:var(--panel);border-radius:var(--radius);padding:14px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 28px}
.toolbar-label{color:var(--muted-2);font-size:12px;font-weight:800}.chip{border:1px solid var(--line);background:var(--bg-deep);color:var(--muted);padding:7px 12px;border-radius:8px;font-size:13px;transition:.2s}
.chip:hover,.chip.selected{color:var(--text);border-color:var(--berry);background:rgba(232,80,114,.13)}.sort{margin-left:auto;background:var(--bg-deep);border:1px solid var(--line);border-radius:8px;color:var(--text);padding:8px 10px}
.content-layout{display:grid;grid-template-columns:240px 1fr;gap:25px;padding-bottom:70px}.filter-panel{align-self:start;position:sticky;top:92px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.filter-panel h2{font-size:18px;margin:0 0 17px}.filter-group{padding:16px 0;border-top:1px solid var(--line-soft)}.filter-group:first-of-type{border-top:0;padding-top:0}
.filter-group h3{font-size:13px;margin:0 0 10px;color:var(--muted)}.filter-group label{display:flex;align-items:center;gap:8px;color:var(--text);font-size:13px;margin:9px 0}
.filter-group input{accent-color:var(--berry)}.clear{color:var(--apricot);border:0;background:transparent;padding:0;font-size:12px}
.result-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.result-head h2{font-size:22px;margin:0}.result-count{color:var(--muted-2);font-size:13px}
.media-grid{display:grid;grid-template-columns:1.25fr .85fr .85fr;gap:15px}.media-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;transition:.22s}
.media-card:hover{transform:translateY(-3px);border-color:var(--berry);box-shadow:0 14px 28px rgba(0,0,0,.22)}.media-card.wide{grid-row:span 2}.cover{height:145px;background:linear-gradient(135deg,#6e294b,#2b1736 52%,#e67558);position:relative;display:flex;align-items:flex-end;padding:14px}
.wide .cover{height:305px}.cover:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,5,14,.78),transparent 65%)}.cover-label{position:relative;z-index:1;font-size:12px;color:#ffe8cf;font-weight:800}
.play{position:absolute;right:13px;top:13px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(19,13,24,.76);border:1px solid rgba(255,255,255,.25);z-index:2}
.card-body{padding:14px}.card-body h3{font-size:16px;margin:0 0 8px;line-height:1.35}.card-body p{font-size:13px;color:var(--muted);margin:0 0 10px}.meta-row{display:flex;flex-wrap:wrap;gap:6px}.meta{font-size:11px;color:var(--muted);padding:3px 7px;border:1px solid var(--line);border-radius:5px}.meta.available{border-color:rgba(99,209,175,.42);color:#9be8cf}
.compact-list{margin-top:15px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);overflow:hidden}.list-item{display:grid;grid-template-columns:42px 1fr auto;gap:13px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line-soft);transition:.2s}.list-item:last-child{border-bottom:0}.list-item:hover{background:var(--panel-2)}
.rank{font-size:22px;font-weight:950;color:var(--berry)}.list-item h3{font-size:15px;margin:0 0 3px}.list-item p{margin:0;color:var(--muted-2);font-size:12px}.list-item .arrow{color:var(--apricot);font-size:18px}
.section{padding:68px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:23px}.section-head h2{font-size:clamp(23px,3vw,30px);line-height:1.25;margin:0;font-weight:900;letter-spacing:-1px}.section-head p{color:var(--muted);max-width:600px;margin:7px 0 0;font-size:14px}.text-link{color:var(--apricot);font-weight:800;font-size:14px;white-space:nowrap}
.rail{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none}.rail::-webkit-scrollbar{display:none}.rail-card{min-width:245px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}.rail-card .cover{height:130px}.rail-card .card-body h3{font-size:15px}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.faq-item{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:0 17px}.faq-item summary{cursor:pointer;padding:17px 0;font-weight:800;list-style:none}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:"＋";float:right;color:var(--apricot);font-size:18px}.faq-item[open] summary:after{content:"－"}.faq-item p{color:var(--muted);font-size:14px;margin:0 0 17px}
.notice{border:1px solid rgba(255,199,117,.3);background:rgba(255,199,117,.07);border-radius:var(--radius);padding:20px 22px;display:flex;justify-content:space-between;align-items:center;gap:20px}.notice strong{display:block;margin-bottom:4px}.notice p{margin:0;color:var(--muted);font-size:13px}
.cta{background:linear-gradient(110deg,#3b1c3b,#25152e);border:1px solid var(--line);border-radius:18px;padding:31px;display:flex;justify-content:space-between;align-items:center;gap:22px}.cta h2{margin:0 0 7px;font-size:25px}.cta p{margin:0;color:var(--muted);font-size:14px}
.site-footer{background:var(--bg-deep);border-top:1px solid var(--line-soft);padding:42px 0 22px}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:30px}.footer-brand{font-size:18px;font-weight:900}.footer-brand small{display:block;color:var(--muted-2);font-size:12px;font-weight:400;margin-top:9px;max-width:300px}.footer-col{display:flex;flex-direction:column;gap:8px}.footer-col h3{font-size:13px;color:var(--apricot);margin:0 0 5px}.footer-col a{color:var(--muted);font-size:13px}.footer-col a:hover{color:var(--text)}.copyright{border-top:1px solid var(--line-soft);margin-top:30px;padding-top:16px;display:flex;justify-content:space-between;gap:15px;color:var(--muted-2);font-size:12px}
.empty-state{display:none;border:1px dashed var(--line);border-radius:var(--radius);padding:35px;text-align:center;color:var(--muted)}
@media(max-width:900px){.intro-grid{grid-template-columns:1fr}.content-layout{grid-template-columns:200px 1fr}.media-grid{grid-template-columns:1fr 1fr}.media-card.wide{grid-column:span 2;grid-row:auto}.wide .cover{height:220px}.live-note{display:none}}
@media(max-width:700px){.container{width:min(var(--max),calc(100% - 32px))}.navbar{height:62px;gap:10px}.logo{font-size:14px;max-width:180px}.nav-links{display:none;position:absolute;top:62px;left:0;right:0;padding:12px 16px 18px;background:var(--bg-deep);border-bottom:1px solid var(--line);flex-direction:column}.nav-links.open{display:flex}.nav-links a{padding:12px 10px}.nav-links a.active:after{left:0;right:auto;bottom:7px;width:3px;height:22px}.mobile-menu{display:grid}.nav-actions .btn{display:none}.page-intro{padding-top:34px}.content-layout{display:block}.filter-panel{position:static;margin-bottom:20px}.filter-panel .filter-group{display:inline-block;vertical-align:top;margin-right:18px;border:0;padding:0 0 8px}.media-grid{grid-template-columns:1fr 1fr}.section{padding:46px 0}.faq-grid{grid-template-columns:1fr}.notice,.cta{align-items:flex-start;flex-direction:column;padding:23px}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:span 2}.copyright{flex-direction:column;gap:5px}}
@media(max-width:480px){h1{font-size:30px}.toolbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.toolbar::-webkit-scrollbar{display:none}.sort{margin-left:0}.media-grid{grid-template-columns:1fr}.media-card.wide{grid-column:auto}.wide .cover{height:180px}.list-item{grid-template-columns:32px 1fr auto;padding:12px}.footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}}

/* roulang page: category2 */
:root{
 --bg:#130d18;--bg-deep:#0d0911;--panel:#211729;--panel-2:#2a1c34;--panel-3:#31213c;
 --line:#4b3655;--line-soft:rgba(216,187,221,.14);--text:#f8f0f7;--muted:#c6b6c8;
 --muted-2:#947f98;--berry:#e85072;--berry-dark:#bd3458;--coral:#ff765f;
 --apricot:#ffc775;--mint:#63d1af;--danger:#ff8495;--shadow:0 20px 50px rgba(0,0,0,.28);
 --radius:14px;--radius-sm:10px;--max:1280px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",Arial,sans-serif;font-size:15px;line-height:1.65;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.17;background-image:radial-gradient(rgba(255,255,255,.25) .6px,transparent .7px);background-size:6px 6px;mask-image:linear-gradient(to bottom,black,transparent 70%);z-index:-1}
a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}img{max-width:100%;display:block}
.container{width:min(var(--max),calc(100% - 48px));margin:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(19,13,24,.96);border-bottom:1px solid var(--line-soft);backdrop-filter:blur(12px)}
.navbar{height:70px;display:flex;align-items:center;gap:28px}
.logo{font-size:16px;font-weight:900;letter-spacing:-.5px;line-height:1.2;max-width:230px}
.logo b{display:block;color:var(--berry);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:2px}
.nav-links{display:flex;align-items:stretch;gap:4px;flex:1}
.nav-links a{position:relative;padding:22px 13px 19px;color:var(--muted);font-size:14px;font-weight:700;transition:.2s}
.nav-links a:hover{color:var(--text);background:rgba(255,255,255,.03)}
.nav-links a.active{color:var(--text)}
.nav-links a.active:after{content:"";position:absolute;left:13px;right:13px;bottom:10px;height:3px;border-radius:8px;background:var(--berry)}
.nav-actions{display:flex;align-items:center;gap:10px}
.live-note{display:flex;align-items:center;gap:8px;white-space:nowrap;color:var(--muted-2);font-size:12px}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(99,209,175,.12)}
.icon-button{width:38px;height:38px;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:10px;display:grid;place-items:center;position:relative;transition:.2s}
.icon-button:hover{transform:translateY(-1px);border-color:var(--berry);background:var(--panel-2)}
.btn{border:1px solid transparent;min-height:42px;padding:0 17px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:14px;transition:transform .18s,background .18s,border .18s,box-shadow .18s}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0)}
.btn-primary{background:var(--berry);color:white;box-shadow:0 8px 22px rgba(232,80,114,.22)}
.btn-primary:hover{background:#f25e7d;box-shadow:0 10px 26px rgba(232,80,114,.33)}
.btn-secondary{background:transparent;border-color:var(--line);color:var(--text)}
.btn-secondary:hover{border-color:var(--apricot);background:rgba(255,199,117,.08)}
.btn-soft{background:rgba(255,255,255,.05);color:var(--muted);border-color:var(--line-soft)}
.btn:focus-visible,.icon-button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid rgba(255,199,117,.65);outline-offset:3px}
.mobile-menu{display:none}
.page-top{padding:32px 0 24px;border-bottom:1px solid var(--line-soft)}
.breadcrumb{display:flex;gap:10px;align-items:center;color:var(--muted-2);font-size:13px;margin-bottom:18px}
.breadcrumb a:hover{color:var(--apricot)}.breadcrumb span{color:var(--line)}
.page-intro{display:flex;justify-content:space-between;align-items:end;gap:32px}
.eyebrow{color:var(--coral);font-weight:900;font-size:12px;letter-spacing:1.5px;margin-bottom:7px}
.page-intro h1{font-size:clamp(30px,4vw,46px);line-height:1.18;letter-spacing:-2px;margin:0 0 12px;font-weight:950}
.page-intro p{color:var(--muted);max-width:720px;margin:0}
.result-count{min-width:150px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--panel);text-align:right}
.result-count strong{display:block;font-size:25px;color:var(--apricot);line-height:1}.result-count span{font-size:12px;color:var(--muted-2)}
.section{padding:44px 0}.browse-layout{display:grid;grid-template-columns:240px 1fr;gap:28px}
.filter-panel{height:max-content;position:sticky;top:94px;border:1px solid var(--line);background:var(--panel);border-radius:var(--radius);padding:20px}
.filter-panel h2{font-size:17px;margin:0 0 18px}.filter-group{padding:16px 0;border-top:1px solid var(--line-soft)}
.filter-group:first-of-type{border-top:0;padding-top:0}.filter-group h3{font-size:12px;color:var(--muted-2);margin:0 0 10px;font-weight:800}
.filter-options{display:flex;flex-wrap:wrap;gap:7px}.filter-options button{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:7px;padding:5px 8px;font-size:12px;transition:.2s}
.filter-options button:hover,.filter-options button.selected{background:rgba(232,80,114,.16);color:var(--text);border-color:var(--berry)}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:18px;padding:12px 14px;border:1px solid var(--line-soft);background:rgba(42,28,52,.7);border-radius:11px}
.active-tags{display:flex;gap:7px;overflow:auto;white-space:nowrap;scrollbar-width:none}.active-tags::-webkit-scrollbar{display:none}
.tag{display:inline-flex;align-items:center;padding:5px 9px;border-radius:6px;background:rgba(255,118,95,.12);border:1px solid rgba(255,118,95,.28);color:#ffd0c6;font-size:12px;font-weight:800}
.sort-select{background:var(--panel);border:1px solid var(--line);color:var(--text);padding:7px 10px;border-radius:7px;font-size:12px}
.media-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:15px}
.media-card{border:1px solid var(--line);background:var(--panel);border-radius:var(--radius-sm);overflow:hidden;transition:.22s;min-width:0}
.media-card:hover{transform:translateY(-3px);border-color:var(--berry);box-shadow:0 14px 30px rgba(0,0,0,.22)}
.media-card.wide{grid-column:span 2}.cover{height:142px;position:relative;padding:13px;display:flex;align-items:flex-end;background:linear-gradient(135deg,#65304f,#281831 54%,#d15a66)}
.wide .cover{height:210px}.cover:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,6,13,.8),transparent 60%)}
.cover.alt{background:linear-gradient(135deg,#4c4967,#251a35 55%,#c47d68)}.cover.mint{background:linear-gradient(135deg,#265b58,#221b38 55%,#9f536b)}.cover.gold{background:linear-gradient(135deg,#765238,#2a1a30 56%,#c46470)}
.cover-title{position:relative;z-index:1}.cover-title small{display:block;color:#ffe4c9;font-size:11px;font-weight:800}.cover-title strong{display:block;font-size:17px;line-height:1.3}
.card-body{padding:13px 14px}.card-body h3{font-size:15px;margin:0 0 8px;line-height:1.4}.meta-row{display:flex;flex-wrap:wrap;gap:6px}.meta{font-size:11px;color:var(--muted);padding:3px 7px;border:1px solid var(--line);border-radius:5px}.meta.available{border-color:rgba(99,209,175,.42);color:#9be8cf}
.number-list{margin-top:15px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel-2);overflow:hidden}.number-item{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;padding:13px 15px;border-bottom:1px solid var(--line-soft)}.number-item:last-child{border-bottom:0}.number{font-size:18px;color:var(--berry);font-weight:900}.number-item strong{font-size:14px}.number-item small{display:block;color:var(--muted-2);font-size:11px}.number-item .meta{font-size:10px}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:20px}.section-head h2{font-size:clamp(23px,3vw,30px);line-height:1.25;margin:0;font-weight:900;letter-spacing:-1px}.section-head p{color:var(--muted);max-width:650px;margin:7px 0 0;font-size:14px}
.rail{display:flex;gap:14px;overflow:auto;padding-bottom:8px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}.rail-card{min-width:230px;flex:0 0 230px}.rail-card .cover{height:126px}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.faq-item{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:0 17px}.faq-item summary{list-style:none;cursor:pointer;padding:16px 20px 16px 0;font-weight:800;position:relative}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:"＋";position:absolute;right:0;color:var(--apricot);font-size:18px}.faq-item[open] summary:after{content:"−"}.faq-item p{color:var(--muted);font-size:13px;margin:0 0 16px}
.age-notice{margin:18px 0 0;border-left:3px solid var(--apricot);background:rgba(255,199,117,.08);padding:14px 16px;color:var(--muted);font-size:13px}
.cta-band{padding:27px 30px;border:1px solid rgba(232,80,114,.38);border-radius:var(--radius);background:linear-gradient(110deg,#3a1d38,#24162c 60%,#38202e);display:flex;justify-content:space-between;align-items:center;gap:24px}.cta-band h2{font-size:24px;margin:0 0 5px}.cta-band p{color:var(--muted);margin:0;font-size:14px}
.site-footer{border-top:1px solid var(--line-soft);padding:42px 0 25px;background:var(--bg-deep)}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:35px}.footer-brand{font-weight:900;font-size:16px}.footer-brand small{display:block;color:var(--muted-2);font-size:12px;font-weight:400;margin-top:8px;max-width:290px}.footer-col{display:flex;flex-direction:column;gap:8px}.footer-col h3{font-size:13px;color:var(--apricot);margin:0 0 5px}.footer-col a{color:var(--muted);font-size:13px}.footer-col a:hover{color:var(--text)}.copyright{display:flex;justify-content:space-between;gap:20px;margin-top:35px;padding-top:17px;border-top:1px solid var(--line-soft);color:var(--muted-2);font-size:11px}
@media(max-width:900px){.navbar{gap:15px}.nav-links a{padding-left:8px;padding-right:8px}.nav-actions .btn{display:none}.browse-layout{grid-template-columns:205px 1fr}.media-grid{grid-template-columns:1fr 1fr}.media-card.wide{grid-column:span 2}}
@media(max-width:700px){.container{width:min(var(--max),calc(100% - 32px))}.navbar{height:62px}.logo{font-size:13px;max-width:190px}.logo b{font-size:9px}.nav-links{display:none}.nav-actions{margin-left:auto}.live-note{display:none}.mobile-menu{display:grid}.page-top{padding-top:25px}.page-intro{display:block}.result-count{text-align:left;margin-top:18px;width:max-content}.browse-layout{display:block}.filter-panel{position:static;margin-bottom:18px}.filter-panel .filter-group:nth-of-type(n+3){display:none}.toolbar{align-items:flex-start;flex-direction:column}.sort-select{width:100%}.media-grid{grid-template-columns:1fr 1fr}.wide .cover{height:170px}.faq-grid{grid-template-columns:1fr}.cta-band{display:block;padding:24px}.cta-band .btn{margin-top:18px}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:span 2}.copyright{display:block}.copyright span{display:block;margin-top:6px}}
@media(max-width:480px){.media-grid{grid-template-columns:1fr}.media-card.wide{grid-column:auto}.wide .cover,.cover{height:180px}.page-intro h1{font-size:30px}.section{padding:35px 0}.footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}}