/* roulang page: index */
:root {
      --bg: #111416;
      --bg-soft: #181c1d;
      --panel: #202526;
      --panel-light: #293030;
      --ink: #f4f1ed;
      --muted: #a6afab;
      --line: rgba(244,241,237,.12);
      --red: #a94e59;
      --red-bright: #c46a71;
      --green: #8ca69a;
      --gold: #d5b878;
      --radius: 14px;
      --shadow: 0 18px 42px rgba(0,0,0,.24);
      --container: 1240px;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      background: var(--bg);
      color: var(--ink);
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
      line-height: 1.7;
      font-size: 15px;
    }
    a { color: inherit; text-decoration: none; }
    img { display: block; width: 100%; object-fit: cover; }
    button, input, select { font: inherit; }
    button { cursor: pointer; }
    .container { width: min(var(--container), calc(100% - 48px)); margin: 0 auto; }
    .eyebrow {
      color: var(--green);
      font-size: 12px;
      letter-spacing: .12em;
      text-transform: uppercase;
      margin-bottom: 10px;
    }
    .section { padding: 82px 0; border-top: 1px solid var(--line); }
    .section.alt { background: var(--bg-soft); }
    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 30px;
    }
    .section-head h2 { font-size: clamp(25px, 3vw, 38px); line-height: 1.25; letter-spacing: 0; }
    .section-head p { max-width: 630px; color: var(--muted); }
    .text-link { color: var(--green); border-bottom: 1px solid rgba(140,166,154,.45); padding-bottom: 3px; transition: color .2s; }
    .text-link:hover { color: var(--ink); }
    .site-header {
      position: sticky;
      top: 0;
      z-index: 20;
      background: rgba(17,20,22,.92);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--line);
    }
    .nav {
      min-height: 76px;
      display: flex;
      align-items: center;
      gap: 28px;
    }
    .brand { display: inline-flex; align-items: center; gap: 11px; min-width: 260px; font-weight: 700; }
    .brand-mark {
      width: 34px; height: 34px; display: grid; place-items: center;
      background: var(--red); color: #fff; border-radius: 9px; font-size: 17px;
    }
    .brand-name { font-size: 16px; white-space: nowrap; }
    .nav-links { display: flex; align-items: center; gap: 24px; flex: 1; }
    .nav-links a { color: var(--muted); transition: color .2s; }
    .nav-links a:hover, .nav-links a.active { color: var(--ink); }
    .nav-tools { display: flex; align-items: center; gap: 10px; }
    .search-mini {
      width: 168px; height: 38px; border: 1px solid var(--line); border-radius: 8px;
      background: rgba(255,255,255,.04); color: var(--ink); padding: 0 12px; outline: none;
    }
    .search-mini:focus, .filter select:focus, .filter input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(140,166,154,.13); }
    .menu-toggle { display: none; border: 1px solid var(--line); color: var(--ink); background: transparent; border-radius: 8px; padding: 6px 10px; }
    .hero {
      min-height: 610px;
      display: flex;
      align-items: end;
      position: relative;
      overflow: hidden;
      background:
        linear-gradient(90deg, rgba(10,12,13,.94) 0%, rgba(10,12,13,.68) 46%, rgba(10,12,13,.3) 100%),
        linear-gradient(0deg, rgba(10,12,13,.82), transparent 48%),
        url("https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?auto=format&fit=crop&w=1800&q=88") center/cover;
    }
    .hero-inner { width: min(var(--container), calc(100% - 48px)); margin: 0 auto; padding: 94px 0 70px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 70px; align-items: end; }
    .hero-copy { max-width: 700px; }
    .hero h1 { font-size: clamp(35px, 5vw, 66px); line-height: 1.12; margin-bottom: 22px; }
    .hero-copy p { max-width: 690px; color: #d0d4d1; font-size: 17px; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      min-height: 44px; border-radius: 8px; padding: 0 18px; border: 1px solid transparent;
      transition: background .2s, border-color .2s, transform .2s, color .2s;
    }
    .btn:hover { transform: translateY(-2px); }
    .btn-primary { background: var(--red); color: #fff; }
    .btn-primary:hover { background: var(--red-bright); }
    .btn-ghost { border-color: rgba(244,241,237,.28); color: var(--ink); background: rgba(0,0,0,.2); }
    .btn-ghost:hover { border-color: var(--green); color: var(--green); }
    .hero-board { background: rgba(24,28,29,.9); border: 1px solid rgba(244,241,237,.16); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
    .board-title { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
    .rank-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line); }
    .rank-row:last-child { border-bottom: 0; }
    .rank-no { color: var(--red-bright); font-size: 19px; font-weight: 700; }
    .rank-row strong { display: block; font-size: 14px; }
    .rank-row small { color: var(--muted); }
    .score { color: var(--gold); font-weight: 700; }
    .filter-strip { padding: 20px 0; background: #15191a; border-bottom: 1px solid var(--line); }
    .filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
    .filter select, .filter input {
      height: 42px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 0 13px; outline: none;
    }
    .filter input { flex: 1; min-width: 190px; }
    .filter select { min-width: 140px; }
    .filter button { height: 42px; }
    .channel-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
    .channel {
      padding: 18px 16px; border: 1px solid var(--line); background: var(--panel); border-radius: 10px;
      transition: border-color .2s, background .2s;
    }
    .channel:hover { border-color: var(--red); background: var(--panel-light); }
    .channel strong { display: block; margin-bottom: 4px; }
    .channel span { color: var(--muted); font-size: 13px; }
    .poster-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
    .poster-card { min-width: 0; transition: transform .2s; }
    .poster-card:hover { transform: translateY(-5px); }
    .poster {
      aspect-ratio: 3 / 4.15; border-radius: 10px; overflow: hidden; background: var(--panel); position: relative;
      border: 1px solid var(--line);
    }
    .poster img { height: 100%; transition: transform .4s; }
    .poster-card:hover img { transform: scale(1.04); }
    .poster-overlay { position: absolute; inset: auto 0 0; padding: 34px 12px 11px; background: linear-gradient(transparent, rgba(0,0,0,.86)); }
    .poster-overlay span { font-size: 12px; color: #d9dfdc; }
    .card-info { padding-top: 12px; }
    .card-info h3 { font-size: 16px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .meta { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 12px; }
    .status { color: var(--green); }
    .tag { display: inline-flex; padding: 3px 7px; border-radius: 4px; background: rgba(140,166,154,.12); color: var(--green); font-size: 12px; }
    .rating { color: var(--gold); }
    .feature-band { display: grid; grid-template-columns: .9fr 1.1fr; gap: 34px; align-items: stretch; }
    .feature-image { min-height: 330px; border-radius: var(--radius); overflow: hidden; background: url("https://images.unsplash.com/photo-1517604931442-7e0c8ed2963c?auto=format&fit=crop&w=1200&q=85") center/cover; }
    .feature-copy { padding: 18px 0; }
    .feature-copy h3 { font-size: 30px; line-height: 1.3; margin-bottom: 14px; }
    .feature-copy p { color: var(--muted); margin-bottom: 20px; }
    .feature-points { display: grid; gap: 12px; }
    .feature-points div { border-top: 1px solid var(--line); padding-top: 12px; display: flex; justify-content: space-between; gap: 16px; }
    .feature-points span { color: var(--muted); }
    .timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
    .timeline-item { padding: 20px; background: var(--bg-soft); min-height: 150px; }
    .timeline-item time { color: var(--red-bright); font-size: 13px; }
    .timeline-item h3 { margin: 11px 0 6px; font-size: 16px; }
    .timeline-item p { color: var(--muted); font-size: 13px; }
    .rank-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
    .rank-list .rank-row { grid-template-columns: 32px 1fr auto; }
    .duration-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .duration-card { border-left: 3px solid var(--red); padding: 20px 22px; background: var(--panel); }
    .duration-card h3 { font-size: 19px; margin-bottom: 5px; }
    .duration-card p { color: var(--muted); font-size: 13px; }
    .quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .quote { padding: 22px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
    .quote p { color: #d9dfdc; margin-bottom: 14px; }
    .quote small { color: var(--green); }
    .news-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 34px; }
    .news-feature { min-height: 250px; padding: 28px; display: flex; flex-direction: column; justify-content: end; border-radius: var(--radius); background: linear-gradient(0deg, rgba(0,0,0,.8), transparent), url("https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=1200&q=85") center/cover; }
    .news-feature h3 { font-size: 24px; max-width: 500px; }
    .news-feature span { color: var(--green); font-size: 13px; margin-bottom: 8px; }
    .news-list { display: grid; gap: 0; }
    .news-item { display: grid; grid-template-columns: 86px 1fr; gap: 15px; padding: 14px 0; border-bottom: 1px solid var(--line); }
    .news-item:first-child { padding-top: 0; }
    .news-item img { height: 66px; border-radius: 7px; }
    .news-item h3 { font-size: 15px; line-height: 1.45; margin-bottom: 4px; }
    .news-item p { color: var(--muted); font-size: 12px; }
    .stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .stat { padding: 28px 20px; border-right: 1px solid var(--line); }
    .stat:last-child { border-right: 0; }
    .stat strong { display: block; font-size: 34px; color: var(--ink); margin-bottom: 4px; }
    .stat span { color: var(--muted); font-size: 13px; }
    .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
    .step { position: relative; padding-top: 20px; border-top: 2px solid var(--red); }
    .step b { color: var(--red-bright); font-size: 13px; }
    .step h3 { margin: 9px 0 5px; font-size: 17px; }
    .step p { color: var(--muted); font-size: 13px; }
    .faq { max-width: 850px; }
    details { border-top: 1px solid var(--line); padding: 18px 0; }
    details:last-child { border-bottom: 1px solid var(--line); }
    summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; }
    summary::-webkit-details-marker { display: none; }
    summary::after { content: "+"; color: var(--green); font-size: 20px; }
    details[open] summary::after { content: "−"; }
    details p { color: var(--muted); padding: 13px 25px 0 0; }
    .browse-end { background: #20191b; padding: 64px 0; }
    .browse-end-inner { display: flex; justify-content: space-between; align-items: center; gap: 30px; }
    .browse-end h2 { font-size: clamp(25px, 3vw, 38px); }
    .browse-end p { color: var(--muted); margin-top: 8px; }
    footer { background: #0d1011; padding: 58px 0 24px; border-top: 1px solid var(--line); }
    .footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 38px; }
    footer h3 { font-size: 15px; margin-bottom: 15px; }
    footer p, footer a { color: var(--muted); font-size: 13px; }
    footer a { display: block; margin: 8px 0; transition: color .2s; }
    footer a:hover { color: var(--ink); }
    .footer-brand p { max-width: 300px; margin-top: 13px; }
    .copyright { border-top: 1px solid var(--line); margin-top: 38px; padding-top: 18px; color: #74807b; font-size: 12px; display: flex; justify-content: space-between; gap: 20px; }
    @media (max-width: 1024px) {
      .brand { min-width: auto; }
      .nav { gap: 18px; }
      .nav-links { gap: 14px; }
      .search-mini { width: 130px; }
      .hero-inner { gap: 35px; }
      .poster-grid { grid-template-columns: repeat(4, 1fr); }
      .channel-grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 768px) {
      .container, .hero-inner { width: min(100% - 32px, var(--container)); }
      .nav { min-height: 68px; justify-content: space-between; }
      .brand-name { font-size: 14px; }
      .nav-links, .nav-tools .search-mini { display: none; }
      .menu-toggle { display: block; }
      .nav.is-open { flex-wrap: wrap; padding: 12px 0; }
      .nav.is-open .nav-links { order: 3; display: grid; width: 100%; gap: 12px; padding: 15px 0 5px; border-top: 1px solid var(--line); }
      .nav.is-open .nav-tools { margin-left: auto; }
      .nav.is-open .nav-tools .search-mini { display: block; width: 150px; }
      .hero { min-height: 670px; }
      .hero-inner { grid-template-columns: 1fr; padding: 90px 0 44px; gap: 28px; }
      .hero h1 { font-size: 39px; }
      .hero-copy p { font-size: 15px; }
      .section { padding: 58px 0; }
      .section-head { display: block; }
      .section-head p { margin-top: 12px; }
      .poster-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 13px; }
      .feature-band, .news-layout { grid-template-columns: 1fr; }
      .feature-image { min-height: 250px; }
      .timeline, .steps { grid-template-columns: repeat(2, 1fr); }
      .rank-list { grid-template-columns: 1fr; }
      .duration-grid, .quote-grid { grid-template-columns: 1fr; }
      .stats { grid-template-columns: repeat(2, 1fr); }
      .stat:nth-child(2) { border-right: 0; }
      .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
      .browse-end-inner { display: block; }
      .browse-end .btn { margin-top: 20px; }
      .footer-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 520px) {
      .brand-mark { width: 30px; height: 30px; font-size: 15px; }
      .brand-name { max-width: 210px; overflow: hidden; text-overflow: ellipsis; }
      .hero h1 { font-size: 34px; }
      .hero-board { padding: 16px; }
      .filter { display: grid; grid-template-columns: 1fr 1fr; }
      .filter input, .filter button { grid-column: 1 / -1; width: 100%; }
      .filter select { min-width: 0; width: 100%; }
      .channel-grid { grid-template-columns: repeat(2, 1fr); }
      .timeline, .steps { grid-template-columns: 1fr; }
      .news-item { grid-template-columns: 74px 1fr; }
      .news-item img { height: 58px; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 25px 18px; }
      .footer-brand { grid-column: 1 / -1; }
      .copyright { display: block; }
      .copyright span { display: block; margin-top: 6px; }
    }

/* roulang page: category1 */
:root{
 --bg:#111416;--bg-soft:#181c1d;--panel:#202526;--panel-light:#293030;
 --ink:#f4f1ed;--muted:#a6afab;--line:rgba(244,241,237,.12);
 --red:#a94e59;--red-bright:#c46a71;--green:#8ca69a;--gold:#d5b878;
 --radius:14px;--shadow:0 18px 42px rgba(0,0,0,.24);--container:1240px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;line-height:1.7;font-size:15px}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;object-fit:cover}
button,input,select{font:inherit}
button{cursor:pointer}
.container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
.site-header{position:sticky;top:0;z-index:20;background:rgba(17,20,22,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{min-height:76px;display:flex;align-items:center;gap:28px}
.brand{display:inline-flex;align-items:center;gap:11px;min-width:260px;font-weight:700}
.brand-mark{width:34px;height:34px;display:grid;place-items:center;background:var(--red);color:#fff;border-radius:9px;font-size:17px}
.brand-name{font-size:16px;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:24px;flex:1}
.nav-links a{color:var(--muted);transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-tools{display:flex;align-items:center;gap:10px}
.search-mini{width:168px;height:38px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.04);color:var(--ink);padding:0 12px;outline:none}
.search-mini:focus,.filter select:focus,.filter input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(140,166,154,.13)}
.menu-toggle{display:none;border:1px solid var(--line);color:var(--ink);background:transparent;border-radius:8px;padding:6px 10px}
.page-intro{padding:72px 0 54px;border-bottom:1px solid var(--line);background:linear-gradient(110deg,#171a1b 0%,#111416 66%)}
.breadcrumb{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:13px;margin-bottom:24px}
.breadcrumb a:hover{color:var(--ink)}
.eyebrow{color:var(--green);font-size:12px;letter-spacing:.12em;margin-bottom:10px}
.page-intro h1{max-width:850px;font-size:clamp(34px,5vw,62px);line-height:1.14;margin:0 0 20px}
.page-intro p{max-width:760px;color:#cbd0cc;font-size:17px;margin:0}
.section{padding:72px 0;border-top:1px solid var(--line)}
.section.alt{background:var(--bg-soft)}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:30px}
.section-head h2{font-size:clamp(25px,3vw,38px);line-height:1.25;margin:0}
.section-head p{max-width:630px;color:var(--muted);margin:0}
.text-link{color:var(--green);border-bottom:1px solid rgba(140,166,154,.45);padding-bottom:3px;transition:color .2s}
.text-link:hover{color:var(--ink)}
.filter{display:flex;flex-wrap:wrap;gap:10px;padding:20px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.filter select,.filter input{height:42px;background:#171b1c;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:0 13px;outline:none}
.filter input{flex:1;min-width:210px}
.filter select{min-width:145px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:8px;padding:0 18px;border:1px solid transparent;transition:background .2s,border-color .2s,transform .2s,color .2s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{background:var(--red-bright)}
.btn-ghost{border-color:rgba(244,241,237,.28);color:var(--ink);background:rgba(0,0,0,.2)}
.btn-ghost:hover{border-color:var(--green);color:var(--green)}
.poster-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.poster-card{min-width:0;transition:transform .2s}
.poster-card:hover{transform:translateY(-5px)}
.poster{aspect-ratio:2/3;overflow:hidden;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line)}
.poster img{height:100%;transition:transform .4s}
.poster-card:hover img{transform:scale(1.04)}
.card-info{padding-top:12px}
.card-info h3{font-size:16px;margin:0 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta{display:flex;flex-wrap:wrap;gap:8px;color:var(--muted);font-size:12px}
.tag{display:inline-flex;padding:3px 7px;border-radius:4px;background:rgba(140,166,154,.12);color:var(--green);font-size:12px}
.rating{color:var(--gold)}
.rank-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:28px}
.rank-list{border-top:1px solid var(--line)}
.rank-row{display:grid;grid-template-columns:42px 1fr auto;gap:14px;align-items:center;padding:17px 0;border-bottom:1px solid var(--line)}
.rank-number{font-size:22px;color:var(--red-bright);font-weight:700}
.rank-row strong{display:block;font-size:15px}
.rank-row small{color:var(--muted)}
.rank-score{color:var(--gold);font-weight:700}
.feature-panel{padding:30px;background:var(--panel);border-radius:var(--radius);border:1px solid var(--line)}
.feature-panel h3{font-size:28px;line-height:1.3;margin:0 0 14px}
.feature-panel p{color:var(--muted);margin:0 0 22px}
.info-list{display:grid;gap:0}
.info-item{display:grid;grid-template-columns:120px 1fr auto;gap:18px;align-items:center;padding:17px 0;border-bottom:1px solid var(--line)}
.info-item:last-child{border-bottom:0}
.info-date{color:var(--green);font-size:13px}
.info-item h3{font-size:16px;margin:0}
.info-item p{color:var(--muted);font-size:13px;margin:2px 0 0}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stat{padding:22px;background:var(--panel);border-top:2px solid var(--red);border-radius:10px}
.stat strong{display:block;font-size:31px;color:var(--ink);line-height:1.2}
.stat span{display:block;color:var(--muted);margin-top:5px}
.faq-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.faq{padding:20px 22px;background:var(--panel);border:1px solid var(--line);border-radius:10px}
.faq summary{cursor:pointer;font-weight:700;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq p{color:var(--muted);margin:13px 0 0;font-size:14px}
.cta-band{padding:38px;background:#241b1d;border:1px solid rgba(196,106,113,.3);border-radius:var(--radius);display:flex;justify-content:space-between;align-items:center;gap:24px}
.cta-band h2{margin:0;font-size:28px}
.cta-band p{margin:6px 0 0;color:var(--muted)}
footer{border-top:1px solid var(--line);padding:54px 0 22px;background:#0d1011}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
.footer-brand p{max-width:350px;color:var(--muted);margin:18px 0 0}
footer h3{font-size:14px;margin:0 0 15px;color:var(--ink)}
footer a{display:block;color:var(--muted);font-size:14px;margin:8px 0;transition:color .2s}
footer a:hover{color:var(--green)}
.copyright{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);margin-top:38px;padding-top:18px;color:#77817d;font-size:12px}
@media(max-width:1024px){
 .brand{min-width:220px}.nav{gap:18px}.nav-links{gap:15px}
 .poster-grid{grid-template-columns:repeat(4,1fr)}.rank-layout{grid-template-columns:1fr}
}
@media(max-width:768px){
 .container{width:min(var(--container),calc(100% - 32px))}
 .nav{min-height:68px}.brand-name{font-size:14px}.brand{min-width:0;flex:1}
 .nav-links{display:none;position:absolute;top:68px;left:0;right:0;padding:16px;background:#151819;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0}
 .nav-links.is-open{display:flex}.nav-links a{padding:12px 16px;border-bottom:1px solid var(--line)}
 .nav-tools{margin-left:auto}.search-mini{display:none}.menu-toggle{display:block}
 .page-intro{padding:52px 0 42px}.page-intro h1{font-size:40px}
 .section{padding:56px 0}.section-head{display:block}.section-head p{margin-top:12px}
 .poster-grid{grid-template-columns:repeat(3,1fr);gap:16px}.stat-grid{grid-template-columns:repeat(2,1fr)}
 .info-item{grid-template-columns:82px 1fr}.info-item .tag{display:none}
 .faq-list{grid-template-columns:1fr}.cta-band{display:block}.cta-band .btn{margin-top:20px}
 .footer-grid{grid-template-columns:1fr 1fr;gap:26px}.footer-brand{grid-column:1/-1}
}
@media(max-width:520px){
 .page-intro h1{font-size:33px}.page-intro p{font-size:15px}
 .poster-grid{grid-template-columns:repeat(2,1fr)}.filter>*{width:100%}.filter input{min-width:0}
 .stat-grid{grid-template-columns:1fr 1fr}.rank-row{grid-template-columns:34px 1fr auto;gap:9px}
 .info-item{grid-template-columns:1fr;gap:3px}.info-date{font-size:12px}
 .footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}.copyright{display:block}.copyright span{display:block;margin-top:5px}
}

/* roulang page: category2 */
:root{--bg:#111416;--bg-soft:#181c1d;--panel:#202526;--panel-light:#293030;--ink:#f4f1ed;--muted:#a6afab;--line:rgba(244,241,237,.12);--red:#a94e59;--red-bright:#c46a71;--green:#8ca69a;--gold:#d5b878;--radius:14px;--shadow:0 18px 42px rgba(0,0,0,.24);--container:1240px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;line-height:1.7;font-size:15px}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;object-fit:cover}
button,input,select{font:inherit}
button{cursor:pointer}
.container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
.site-header{position:sticky;top:0;z-index:20;background:rgba(17,20,22,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{min-height:76px;display:flex;align-items:center;gap:28px}
.brand{display:inline-flex;align-items:center;gap:11px;min-width:260px;font-weight:700}
.brand-mark{width:34px;height:34px;display:grid;place-items:center;background:var(--red);color:#fff;border-radius:9px;font-size:17px}
.brand-name{font-size:16px;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:24px;flex:1}
.nav-links a{color:var(--muted);transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-tools{display:flex;align-items:center;gap:10px}
.search-mini{width:168px;height:38px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.04);color:var(--ink);padding:0 12px;outline:none}
.search-mini:focus,.filter select:focus,.filter input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(140,166,154,.13)}
.menu-toggle{display:none;border:1px solid var(--line);color:var(--ink);background:transparent;border-radius:8px;padding:6px 10px}
.page-intro{padding:72px 0 46px;border-bottom:1px solid var(--line);background:linear-gradient(120deg,#171b1c 0%,#111416 68%)}
.crumbs{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:13px;margin-bottom:24px}
.crumbs a:hover{color:var(--green)}
.eyebrow{color:var(--green);font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
.intro-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:end}
.page-intro h1{font-size:clamp(34px,5vw,62px);line-height:1.15;margin:0 0 20px;max-width:760px}
.page-intro p{color:#cbd0cd;max-width:760px;font-size:16px;margin:0}
.intro-note{border-left:3px solid var(--red);padding:4px 0 4px 22px;color:var(--muted)}
.intro-note strong{display:block;color:var(--ink);font-size:25px;margin-bottom:4px}
.section{padding:70px 0;border-top:1px solid var(--line)}
.section.alt{background:var(--bg-soft)}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:28px}
.section-head h2{font-size:clamp(25px,3vw,36px);line-height:1.25;margin:0}
.section-head p{max-width:620px;color:var(--muted);margin:0}
.text-link{color:var(--green);border-bottom:1px solid rgba(140,166,154,.45);padding-bottom:3px;transition:color .2s}
.text-link:hover{color:var(--ink)}
.filter-bar{display:grid;grid-template-columns:1.5fr repeat(4,1fr) auto;gap:10px;padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.filter input,.filter select{height:42px;background:#171b1c;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:0 13px;outline:none;min-width:0}
.filter button{height:42px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:8px;padding:0 18px;border:1px solid transparent;transition:background .2s,border-color .2s,transform .2s,color .2s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{background:var(--red-bright)}
.btn-ghost{border-color:rgba(244,241,237,.28);color:var(--ink);background:rgba(0,0,0,.16)}
.btn-ghost:hover{border-color:var(--green);color:var(--green)}
.topic-strip{display:grid;grid-template-columns:1.1fr 1.9fr;gap:28px;align-items:stretch}
.topic-copy{padding:25px 0}
.topic-copy h3{font-size:28px;line-height:1.3;margin:0 0 14px}
.topic-copy p{color:var(--muted);margin:0 0 22px}
.topic-image{min-height:270px;border-radius:var(--radius);overflow:hidden;background:url("https://images.unsplash.com/photo-1517604931442-7e0c8ed2963c?auto=format&fit=crop&w=1400&q=85") center/cover}
.movie-layout{display:grid;grid-template-columns:1fr 310px;gap:34px}
.movie-list{display:grid;grid-template-columns:repeat(3,1fr);gap:24px 18px}
.poster-card{min-width:0;transition:transform .2s}
.poster-card:hover{transform:translateY(-5px)}
.poster{height:285px;border-radius:10px;overflow:hidden;background:var(--panel);position:relative;border:1px solid var(--line)}
.poster img{height:100%;transition:transform .4s}
.poster-card:hover img{transform:scale(1.04)}
.poster-badge{position:absolute;top:11px;left:11px;background:var(--red);color:#fff;padding:3px 8px;border-radius:4px;font-size:12px}
.card-info{padding-top:12px}
.card-info h3{font-size:16px;margin:0 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta{display:flex;flex-wrap:wrap;gap:8px;color:var(--muted);font-size:12px}
.tag{display:inline-flex;padding:3px 7px;border-radius:4px;background:rgba(140,166,154,.12);color:var(--green);font-size:12px}
.score{color:var(--gold);font-weight:700}
.side-panel{border-left:1px solid var(--line);padding-left:24px}
.side-panel h3{font-size:18px;margin:0 0 16px}
.rank-row{display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line)}
.rank-row:last-child{border-bottom:0}
.rank-no{color:var(--red-bright);font-size:19px;font-weight:700}
.rank-row strong{display:block;font-size:14px}
.rank-row small{color:var(--muted)}
.rank-score{color:var(--gold);font-size:13px}
.version-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.version-item{background:var(--panel);padding:23px}
.version-item strong{display:block;font-size:25px;color:var(--ink);margin-bottom:4px}
.version-item span{color:var(--muted);font-size:13px}
.news-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:34px}
.news-feature{min-height:280px;padding:30px;background:linear-gradient(135deg,#292326,#1d2222);border-radius:var(--radius);border:1px solid var(--line)}
.news-feature h3{font-size:27px;line-height:1.35;margin:14px 0}
.news-feature p{color:var(--muted);max-width:540px}
.news-list{border-top:1px solid var(--line)}
.news-item{display:flex;justify-content:space-between;gap:20px;padding:17px 0;border-bottom:1px solid var(--line)}
.news-item strong{font-size:15px;font-weight:500}
.news-item time{color:var(--muted);font-size:12px;white-space:nowrap}
.faq-list{max-width:900px;border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line);padding:18px 0}
.faq-list summary{cursor:pointer;font-size:16px;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:after{content:"+";color:var(--green);font-size:20px}
.faq-list details[open] summary:after{content:"−"}
.faq-list p{color:var(--muted);margin:12px 34px 0 0}
.cta-band{padding:54px 0;background:#252023;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}
.cta-inner h2{margin:0;font-size:30px}
.cta-inner p{color:var(--muted);margin:8px 0 0}
.cta-actions{display:flex;gap:10px;flex-wrap:wrap}
footer{background:#0c0f10;padding:58px 0 24px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:35px}
.footer-brand p{color:var(--muted);max-width:330px;margin-top:17px}
footer h3{font-size:14px;margin:0 0 15px}
footer a{display:block;color:var(--muted);font-size:14px;margin:8px 0;transition:color .2s}
footer a:hover{color:var(--ink)}
.copyright{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);margin-top:42px;padding-top:18px;color:#7f8985;font-size:12px}
@media(max-width:1024px){.nav{gap:16px}.brand{min-width:220px}.nav-links{gap:15px}.search-mini{width:130px}.filter-bar{grid-template-columns:repeat(3,1fr)}.filter-bar input{grid-column:span 3}.movie-layout{grid-template-columns:1fr}.side-panel{border-left:0;border-top:1px solid var(--line);padding:25px 0 0}.intro-grid{gap:35px}.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.container{width:min(var(--container),calc(100% - 32px))}.nav{min-height:68px;flex-wrap:wrap}.brand{min-width:0;flex:1}.brand-name{font-size:14px}.nav-links{order:3;display:none;flex-basis:100%;padding:12px 0 18px;border-top:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:13px}.nav-links.open{display:flex}.nav-tools{margin-left:auto}.search-mini{display:none}.menu-toggle{display:block}.page-intro{padding:52px 0 38px}.intro-grid{grid-template-columns:1fr}.intro-note{border-left:0;border-top:1px solid var(--red);padding:16px 0 0}.topic-strip,.news-layout{grid-template-columns:1fr}.movie-list{grid-template-columns:repeat(2,1fr)}.version-grid{grid-template-columns:repeat(2,1fr)}.section{padding:55px 0}.section-head{display:block}.section-head p{margin-top:10px}.cta-inner{display:block}.cta-actions{margin-top:22px}}
@media(max-width:520px){.page-intro h1{font-size:35px}.filter-bar{grid-template-columns:1fr}.filter-bar input{grid-column:auto}.filter select,.filter input,.filter button{width:100%}.movie-list{gap:22px 12px}.poster{height:235px}.card-info h3{font-size:15px}.version-grid{grid-template-columns:1fr 1fr}.version-item{padding:17px}.version-item strong{font-size:21px}.news-item{display:block}.news-item time{display:block;margin-top:4px}.footer-grid{grid-template-columns:1fr 1fr;gap:24px}.footer-brand{grid-column:span 2}.copyright{display:block}.copyright span{display:block;margin-top:6px}}