/* roulang page: index */
:root {
      --ink: #edf2f6;
      --muted: #9ba8b5;
      --soft: #c7d0d8;
      --bg: #0b1015;
      --panel: #111920;
      --panel-2: #162129;
      --line: rgba(214, 229, 238, .13);
      --accent: #ee5b43;
      --accent-2: #f4b44d;
      --mint: #58c6a7;
      --white: #ffffff;
      --radius: 14px;
      --shadow: 0 18px 48px rgba(0,0,0,.26);
      --container: 1180px;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      background: var(--bg);
      color: var(--ink);
      font-family: "PingFang SC","Microsoft YaHei","Noto Sans CJK SC",Arial,sans-serif;
      line-height: 1.7;
      font-size: 15px;
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; text-decoration: none; }
    img { display: block; width: 100%; object-fit: cover; }
    button, input { font: inherit; }
    button { border: 0; cursor: pointer; }
    :focus-visible { outline: 3px solid rgba(244,180,77,.72); outline-offset: 3px; }
    .container { width: min(var(--container), calc(100% - 48px)); margin: 0 auto; }
    .eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      color: var(--accent-2); font-size: 12px; font-weight: 700;
      letter-spacing: .12em; text-transform: uppercase;
    }
    .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--accent); }
    .section-head {
      display: flex; justify-content: space-between; align-items: end; gap: 28px;
      margin-bottom: 28px;
    }
    .section-head h2 { margin-top: 8px; font-size: clamp(25px, 3vw, 38px); line-height: 1.2; letter-spacing: 0; }
    .section-head p { max-width: 560px; color: var(--muted); line-height: 1.85; }
    header {
      position: sticky; top: 0; z-index: 20;
      background: rgba(11,16,21,.9); backdrop-filter: blur(18px);
      border-bottom: 1px solid var(--line);
    }
    .nav-shell { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    .brand { display: flex; align-items: center; gap: 12px; min-width: max-content; }
    .brand-mark {
      width: 38px; height: 38px; display: grid; place-items: center;
      color: var(--bg); background: var(--accent); border-radius: 9px;
      font-size: 18px; font-weight: 900;
    }
    .brand-name { font-size: 17px; font-weight: 800; letter-spacing: .03em; }
    .nav-links { display: flex; align-items: center; gap: 8px; }
    .nav-links a {
      padding: 9px 14px; border-radius: 8px; color: var(--muted);
      transition: .2s ease;
    }
    .nav-links a:hover, .nav-links a.active { color: var(--white); background: rgba(255,255,255,.07); }
    .nav-links a.active { box-shadow: inset 0 -2px var(--accent); }
    .nav-tag {
      color: var(--bg); background: var(--accent-2); padding: 8px 13px;
      border-radius: 7px; font-size: 12px; font-weight: 800;
    }
    .hero {
      position: relative; min-height: 620px; display: flex; align-items: center;
      overflow: hidden; border-bottom: 1px solid var(--line);
      background:
        linear-gradient(90deg, rgba(11,16,21,.97) 0%, rgba(11,16,21,.79) 45%, rgba(11,16,21,.25) 100%),
        url("https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=1800&q=88") center/cover;
    }
    .hero::after { content: ""; position: absolute; inset: auto 0 0; height: 120px; background: linear-gradient(transparent, var(--bg)); }
    .hero-content { position: relative; z-index: 1; max-width: 720px; padding: 72px 0 92px; }
    .hero h1 { margin: 17px 0 18px; font-size: clamp(40px, 6vw, 72px); line-height: 1.1; letter-spacing: 0; }
    .hero h1 em { color: var(--accent-2); font-style: normal; }
    .hero-lead { max-width: 680px; color: var(--soft); font-size: 17px; line-height: 2; }
    .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 9px;
      min-height: 46px; padding: 0 20px; border-radius: 8px; font-weight: 700;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .btn:hover { transform: translateY(-2px); }
    .btn-primary { color: #17120d; background: var(--accent-2); box-shadow: 0 9px 22px rgba(244,180,77,.18); }
    .btn-primary:hover { background: #ffd078; }
    .btn-ghost { border: 1px solid rgba(255,255,255,.24); color: var(--white); background: rgba(255,255,255,.05); }
    .btn-ghost:hover { background: rgba(255,255,255,.12); }
    .hero-strip { position: absolute; z-index: 2; left: 0; right: 0; bottom: 22px; }
    .hero-stats { display: flex; gap: 30px; color: var(--muted); font-size: 13px; }
    .hero-stats strong { display: block; color: var(--white); font-size: 22px; line-height: 1.2; }
    main > section { padding: 88px 0; }
    .section-dark { background: #0e151b; border-top: 1px solid rgba(255,255,255,.035); border-bottom: 1px solid rgba(255,255,255,.035); }
    .section-panel { background: var(--panel); }
    .metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
    .metric { padding: 26px 25px; background: var(--panel); border-right: 1px solid var(--line); }
    .metric:last-child { border-right: 0; }
    .metric strong { display: block; color: var(--accent-2); font-size: 32px; line-height: 1.2; }
    .metric span { color: var(--muted); font-size: 13px; }
    .matrix { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
    .matrix-card { min-height: 190px; padding: 24px; border: 1px solid var(--line); background: #121b22; border-radius: var(--radius); transition: .2s ease; }
    .matrix-card:hover { border-color: rgba(244,180,77,.5); transform: translateY(-4px); box-shadow: var(--shadow); }
    .matrix-index { color: var(--accent); font-size: 12px; font-weight: 800; }
    .matrix-card h3 { margin: 30px 0 9px; font-size: 19px; }
    .matrix-card p { color: var(--muted); font-size: 13px; line-height: 1.8; }
    .content-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
    .content-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); transition: .22s ease; }
    .content-card:hover { transform: translateY(-5px); border-color: rgba(238,91,67,.58); box-shadow: var(--shadow); }
    .poster { height: 215px; position: relative; overflow: hidden; background: #1d2931; }
    .poster img { height: 100%; transition: transform .35s ease; }
    .content-card:hover .poster img { transform: scale(1.05); }
    .poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(0,0,0,.62)); }
    .badge { position: absolute; z-index: 1; top: 12px; left: 12px; padding: 3px 7px; color: #101418; border-radius: 4px; background: var(--accent-2); font-size: 11px; font-weight: 800; }
    .card-body { padding: 16px 16px 18px; }
    .card-title { font-size: 16px; font-weight: 700; }
    .card-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 9px; color: var(--muted); font-size: 12px; }
    .rating { color: var(--accent-2); font-weight: 800; }
    .popular-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; }
    .feature-card { min-height: 440px; display: flex; align-items: end; padding: 30px; border-radius: var(--radius); overflow: hidden; background: linear-gradient(0deg, rgba(6,10,13,.92), rgba(6,10,13,.08)), url("https://images.unsplash.com/photo-1517604931442-7e0c8ed2963c?auto=format&fit=crop&w=1200&q=85") center/cover; }
    .feature-card h3 { font-size: 30px; line-height: 1.25; }
    .feature-card p { max-width: 470px; margin-top: 10px; color: #d5dde2; }
    .popular-list { display: grid; gap: 12px; }
    .popular-item { display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 13px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
    .popular-item img { width: 74px; height: 88px; border-radius: 6px; }
    .popular-item h4 { font-size: 15px; }
    .popular-item p { color: var(--muted); font-size: 12px; margin-top: 5px; }
    .score { color: var(--accent-2); font-weight: 800; font-size: 16px; }
    .rank-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
    .rank-list { border-top: 1px solid var(--line); }
    .rank-row { display: grid; grid-template-columns: 36px 1fr 86px 52px; align-items: center; gap: 12px; min-height: 58px; border-bottom: 1px solid var(--line); }
    .rank-no { color: var(--accent); font-weight: 900; font-size: 18px; }
    .rank-row:nth-child(-n+3) .rank-no { color: var(--accent-2); }
    .rank-name { font-weight: 650; }
    .rank-type { color: var(--muted); font-size: 12px; }
    .rank-hot { color: var(--soft); font-size: 12px; }
    .rank-score { color: var(--accent-2); font-weight: 800; text-align: right; }
    .timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
    .timeline-card { padding: 24px; border-left: 3px solid var(--accent); background: var(--panel-2); border-radius: 0 10px 10px 0; }
    .timeline-card .step { color: var(--accent-2); font-size: 12px; font-weight: 800; }
    .timeline-card h3 { margin: 15px 0 8px; font-size: 19px; }
    .timeline-card p { color: var(--muted); font-size: 13px; }
    .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .news-card { display: grid; grid-template-columns: 112px 1fr; gap: 15px; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); transition: .2s ease; }
    .news-card:hover { border-color: rgba(88,198,167,.55); background: #152129; }
    .news-card img { height: 86px; border-radius: 7px; }
    .news-card h3 { font-size: 14px; line-height: 1.5; }
    .news-card time { display: block; margin-top: 10px; color: var(--muted); font-size: 11px; }
    .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    details { padding: 20px 22px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
    summary { cursor: pointer; color: var(--white); font-weight: 700; }
    details p { margin-top: 13px; color: var(--muted); font-size: 14px; line-height: 1.9; }
    .cta-band { padding: 44px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid rgba(244,180,77,.25); border-radius: var(--radius); background: linear-gradient(105deg, #24201a, #172027); }
    .cta-band h2 { font-size: clamp(24px, 3vw, 36px); }
    .cta-band p { margin-top: 8px; color: var(--muted); }
    footer { background: #080c10; border-top: 1px solid var(--line); padding: 58px 0 24px; }
    .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 42px; }
    .footer-intro p { max-width: 310px; margin-top: 15px; color: var(--muted); font-size: 13px; }
    footer h3 { margin-bottom: 15px; color: var(--soft); font-size: 14px; }
    footer li { list-style: none; margin: 8px 0; color: var(--muted); font-size: 13px; }
    footer li a:hover { color: var(--accent-2); }
    .copyright { padding-top: 20px; border-top: 1px solid var(--line); color: #71808b; font-size: 12px; }
    @media (max-width: 1024px) {
      .content-grid { grid-template-columns: repeat(3, 1fr); }
      .matrix { grid-template-columns: repeat(2, 1fr); }
      .news-grid { grid-template-columns: repeat(2, 1fr); }
      .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
    }
    @media (max-width: 768px) {
      .container { width: min(var(--container), calc(100% - 32px)); }
      .nav-shell { min-height: 68px; }
      .nav-links { gap: 2px; overflow-x: auto; }
      .nav-links a { padding: 8px 9px; white-space: nowrap; font-size: 13px; }
      .nav-tag { display: none; }
      .hero { min-height: 590px; background-position: 62% center; }
      .hero-content { padding: 62px 0 112px; }
      .hero-lead { font-size: 15px; }
      .section-head { display: block; }
      .section-head p { margin-top: 13px; }
      .metric-grid { grid-template-columns: repeat(2, 1fr); }
      .metric:nth-child(2) { border-right: 0; }
      .metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
      .content-grid { grid-template-columns: repeat(2, 1fr); }
      .popular-layout, .rank-layout { grid-template-columns: 1fr; }
      .feature-card { min-height: 360px; }
      .timeline { grid-template-columns: 1fr; }
      .faq-grid { grid-template-columns: 1fr; }
      .cta-band { display: block; padding: 30px 24px; }
      .cta-band .btn { margin-top: 20px; }
      .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; gap: 22px; }
    }
    @media (max-width: 520px) {
      .brand-name { font-size: 14px; }
      .brand-mark { width: 34px; height: 34px; }
      .hero h1 { font-size: 41px; }
      .hero-stats { gap: 18px; flex-wrap: wrap; }
      main > section { padding: 64px 0; }
      .matrix, .content-grid, .news-grid { grid-template-columns: 1fr; }
      .poster { height: 250px; }
      .metric { padding: 20px 16px; }
      .metric strong { font-size: 26px; }
      .rank-row { grid-template-columns: 30px 1fr 58px; }
      .rank-hot { display: none; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .footer-intro { grid-column: 1 / -1; }
    }

/* roulang page: category1 */
:root{--ink:#edf2f6;--muted:#9ba8b5;--soft:#c7d0d8;--bg:#0b1015;--panel:#111920;--panel-2:#162129;--line:rgba(214,229,238,.13);--accent:#ee5b43;--accent-2:#f4b44d;--mint:#58c6a7;--white:#fff;--radius:14px;--shadow:0 18px 48px rgba(0,0,0,.26);--container:1180px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",Arial,sans-serif;line-height:1.7;font-size:15px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}img{display:block;width:100%;object-fit:cover}button,input{font:inherit}button{border:0;cursor:pointer}
.container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
header{position:sticky;top:0;z-index:20;background:rgba(11,16,21,.92);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.nav-shell{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;min-width:max-content}
.brand-mark{width:38px;height:38px;display:grid;place-items:center;color:var(--bg);background:var(--accent);border-radius:9px;font-size:18px;font-weight:900}
.brand-name{font-size:17px;font-weight:800;letter-spacing:.03em}
.nav-links{display:flex;align-items:center;gap:8px}
.nav-links a{padding:9px 14px;border-radius:8px;color:var(--muted);transition:.2s ease}
.nav-links a:hover,.nav-links a.active{color:var(--white);background:rgba(255,255,255,.07)}
.nav-links a.active{box-shadow:inset 0 -2px var(--accent)}
.nav-tag{color:var(--bg);background:var(--accent-2);padding:8px 13px;border-radius:7px;font-size:12px;font-weight:800}
.hero{position:relative;min-height:560px;display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--line);background:linear-gradient(90deg,rgba(11,16,21,.98) 0%,rgba(11,16,21,.82) 44%,rgba(11,16,21,.28) 100%),url("https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=1800&q=88") center/cover}
.hero:after{content:"";position:absolute;inset:auto 0 0;height:110px;background:linear-gradient(transparent,var(--bg))}
.hero-content{position:relative;z-index:1;max-width:720px;padding:70px 0 86px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--accent-2);font-size:12px;font-weight:700;letter-spacing:.12em}
.eyebrow:before{content:"";width:22px;height:2px;background:var(--accent)}
.hero h1{margin:17px 0 18px;font-size:clamp(40px,6vw,70px);line-height:1.12}
.hero h1 em{color:var(--accent-2);font-style:normal}
.hero-lead{max-width:680px;color:var(--soft);font-size:17px;line-height:2}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 20px;border-radius:8px;font-weight:700;transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{color:#17120d;background:var(--accent-2);box-shadow:0 9px 22px rgba(244,180,77,.18)}
.btn-primary:hover{background:#ffd078}
.btn-ghost{border:1px solid rgba(255,255,255,.24);color:var(--white);background:rgba(255,255,255,.05)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.hero-strip{position:absolute;z-index:2;left:0;right:0;bottom:22px}
.hero-stats{display:flex;gap:30px;color:var(--muted);font-size:13px}
.hero-stats strong{display:block;color:var(--white);font-size:22px;line-height:1.2}
main>section{padding:82px 0}
.section-dark{background:#0e151b;border-top:1px solid rgba(255,255,255,.035);border-bottom:1px solid rgba(255,255,255,.035)}
.section-panel{background:var(--panel)}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:28px}
.section-head h2{margin-top:8px;font-size:clamp(25px,3vw,38px);line-height:1.2}
.section-head p{max-width:570px;color:var(--muted);line-height:1.85}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.metric{padding:25px;background:rgba(255,255,255,.025);border-right:1px solid var(--line)}
.metric:last-child{border-right:0}
.metric strong{display:block;color:var(--accent-2);font-size:30px;line-height:1.2}
.metric span{display:block;margin-top:6px;color:var(--muted);font-size:13px}
.content-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.content-card{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);transition:.22s}
.content-card:hover{transform:translateY(-5px);border-color:rgba(238,91,67,.58);box-shadow:var(--shadow)}
.poster{height:235px;position:relative;overflow:hidden;background:var(--panel-2)}
.poster img{height:100%;transition:transform .35s}
.content-card:hover .poster img{transform:scale(1.05)}
.badge{position:absolute;z-index:1;top:12px;left:12px;padding:3px 7px;color:#101418;border-radius:4px;background:var(--accent-2);font-size:11px;font-weight:800}
.card-body{padding:16px 16px 18px}.card-title{font-size:16px;font-weight:700}.card-meta{display:flex;justify-content:space-between;gap:8px;margin-top:9px;color:var(--muted);font-size:12px}
.card-meta b{color:var(--mint);font-weight:700}
.feature-row{display:grid;grid-template-columns:1.15fr .85fr;gap:22px}
.feature-card{min-height:360px;display:flex;align-items:end;padding:30px;border-radius:var(--radius);overflow:hidden;background:linear-gradient(0deg,rgba(6,10,13,.94),rgba(6,10,13,.1)),url("https://images.unsplash.com/photo-1517604931442-7e0c8ed2963c?auto=format&fit=crop&w=1200&q=85") center/cover}
.feature-card h3{font-size:30px;line-height:1.25}.feature-card p{max-width:470px;margin-top:10px;color:#d5dde2}
.info-panel{padding:30px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.info-panel h3{font-size:23px;margin-bottom:13px}.info-panel p{color:var(--muted);line-height:1.9}
.info-list{list-style:none;margin-top:20px}.info-list li{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-top:1px solid var(--line);color:var(--soft)}.info-list span{color:var(--accent-2);font-size:13px}
.matrix-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.matrix-card{min-height:155px;padding:24px;border:1px solid var(--line);background:#121b22;border-radius:var(--radius);transition:.2s}
.matrix-card:hover{border-color:rgba(244,180,77,.5);transform:translateY(-4px);box-shadow:var(--shadow)}
.matrix-card .matrix-no{color:var(--accent);font-size:12px;font-weight:800}.matrix-card h3{margin:25px 0 8px;font-size:19px}.matrix-card p{color:var(--muted);font-size:13px;line-height:1.8}
.rank-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.rank-list{list-style:none;border-top:1px solid var(--line)}
.rank-list li{display:grid;grid-template-columns:42px 1fr auto auto;align-items:center;gap:15px;padding:15px 0;border-bottom:1px solid var(--line)}
.rank-no{color:var(--accent-2);font-size:20px;font-weight:800}.rank-name{font-weight:700}.rank-type{color:var(--muted);font-size:12px}.rank-score{color:var(--mint);font-weight:800}
.news-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.news-item{display:grid;grid-template-columns:105px 1fr;gap:14px;padding:12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);transition:.2s}.news-item:hover{border-color:rgba(244,180,77,.5);transform:translateY(-3px)}.news-item img{height:82px;border-radius:8px}.news-item h3{font-size:15px;line-height:1.5}.news-item time{display:block;margin-top:7px;color:var(--muted);font-size:12px}
.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.faq-item{padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.025)}.faq-item h3{font-size:16px}.faq-item p{margin-top:9px;color:var(--muted);font-size:14px;line-height:1.85}
.cta-band{padding:34px;border:1px solid rgba(244,180,77,.35);border-radius:var(--radius);background:linear-gradient(100deg,rgba(238,91,67,.16),rgba(244,180,77,.07));display:flex;align-items:center;justify-content:space-between;gap:24px}.cta-band h2{font-size:27px}.cta-band p{margin-top:6px;color:var(--muted)}
footer{padding:58px 0 24px;border-top:1px solid var(--line);background:#080c10}.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:32px}.footer-intro p{max-width:320px;margin-top:17px;color:var(--muted);font-size:13px;line-height:1.9}footer h3{margin-bottom:13px;font-size:14px}footer ul{list-style:none}footer li{margin:9px 0;color:var(--muted);font-size:13px}footer a:hover{color:var(--accent-2)}.copyright{margin-top:38px;padding-top:20px;border-top:1px solid var(--line);color:#71808d;font-size:12px}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}
@media(max-width:1024px){.content-grid{grid-template-columns:repeat(3,1fr)}.feature-row{grid-template-columns:1fr}.footer-grid{grid-template-columns:1.4fr repeat(3,1fr)}}
@media(max-width:768px){.container{width:min(var(--container),calc(100% - 32px))}.nav-shell{min-height:68px;gap:12px}.brand-name{font-size:15px}.nav-links{overflow-x:auto;white-space:nowrap}.nav-links a{padding:8px 9px;font-size:13px}.nav-tag{display:none}.hero{min-height:570px}.hero-content{padding:64px 0 105px}.metric-grid{grid-template-columns:repeat(2,1fr)}.metric:nth-child(2){border-right:0}.metric:nth-child(-n+2){border-bottom:1px solid var(--line)}.content-grid{grid-template-columns:repeat(2,1fr)}.matrix-grid,.news-list{grid-template-columns:repeat(2,1fr)}.rank-layout{grid-template-columns:1fr}.footer-grid{grid-template-columns:repeat(2,1fr)}.footer-intro{grid-column:1/-1}}
@media(max-width:520px){main>section{padding:62px 0}.section-head{display:block}.section-head p{margin-top:12px}.hero h1{font-size:42px}.hero-lead{font-size:15px}.hero-stats{gap:18px}.hero-stats strong{font-size:18px}.hero-actions .btn{width:100%}.content-grid,.matrix-grid,.news-list,.faq-grid{grid-template-columns:1fr}.poster{height:285px}.feature-card{min-height:330px;padding:23px}.feature-card h3{font-size:25px}.rank-list li{grid-template-columns:32px 1fr auto}.rank-type{display:none}.footer-grid{grid-template-columns:1fr}.footer-intro{grid-column:auto}.cta-band{display:block}.cta-band .btn{margin-top:18px;width:100%}}

/* roulang page: category2 */
:root {
      --ink:#edf2f6;
      --muted:#9ba8b5;
      --soft:#c7d0d8;
      --bg:#0b1015;
      --panel:#111920;
      --panel-2:#162129;
      --line:rgba(214,229,238,.13);
      --accent:#ee5b43;
      --accent-2:#f4b44d;
      --mint:#58c6a7;
      --white:#fff;
      --radius:14px;
      --shadow:0 18px 48px rgba(0,0,0,.26);
      --container:1180px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--bg);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",Arial,sans-serif;font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}
    a{color:inherit;text-decoration:none}
    img{display:block;width:100%;object-fit:cover}
    button,input{font:inherit}
    button{border:0;cursor:pointer}
    .container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--accent-2);font-size:12px;font-weight:700;letter-spacing:.12em}
    .eyebrow:before{content:"";width:22px;height:2px;background:var(--accent)}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:28px}
    .section-head h2{margin:8px 0 0;font-size:clamp(25px,3vw,38px);line-height:1.2}
    .section-head p{max-width:560px;margin:0;color:var(--muted);line-height:1.85}
    header{position:sticky;top:0;z-index:20;background:rgba(11,16,21,.9);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
    .nav-shell{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
    .brand{display:flex;align-items:center;gap:12px;min-width:max-content}
    .brand-mark{width:38px;height:38px;display:grid;place-items:center;color:var(--bg);background:var(--accent);border-radius:9px;font-size:18px;font-weight:900}
    .brand-name{font-size:17px;font-weight:800;letter-spacing:.03em}
    .nav-links{display:flex;align-items:center;gap:8px}
    .nav-links a{padding:9px 14px;border-radius:8px;color:var(--muted);transition:.2s ease}
    .nav-links a:hover,.nav-links a.active{color:var(--white);background:rgba(255,255,255,.07)}
    .nav-links a.active{box-shadow:inset 0 -2px var(--accent)}
    .nav-tag{color:var(--bg);background:var(--accent-2);padding:8px 13px;border-radius:7px;font-size:12px;font-weight:800}
    .hero{position:relative;min-height:540px;display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--line);background:linear-gradient(90deg,rgba(11,16,21,.98) 0%,rgba(11,16,21,.84) 46%,rgba(11,16,21,.25) 100%),url("https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?auto=format&fit=crop&w=1800&q=88") center/cover}
    .hero:after{content:"";position:absolute;inset:auto 0 0;height:110px;background:linear-gradient(transparent,var(--bg))}
    .hero-content{position:relative;z-index:1;width:100%;padding:76px 0 92px}
    .hero h1{max-width:680px;margin:17px 0 18px;font-size:clamp(40px,6vw,70px);line-height:1.1}
    .hero h1 em{color:var(--accent-2);font-style:normal}
    .hero-lead{max-width:670px;color:var(--soft);font-size:17px;line-height:2}
    .hero-query{display:flex;max-width:610px;margin-top:27px;padding:6px;border:1px solid rgba(255,255,255,.2);border-radius:10px;background:rgba(8,12,16,.72)}
    .hero-query input{min-width:0;flex:1;padding:0 14px;color:var(--white);background:transparent;border:0;outline:0}
    .hero-query input::placeholder{color:#83909b}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 20px;border-radius:8px;font-weight:700;transition:.2s ease}
    .btn:hover{transform:translateY(-2px)}
    .btn:focus,input:focus,a:focus{outline:2px solid var(--accent-2);outline-offset:3px}
    .btn-primary{color:#17120d;background:var(--accent-2);box-shadow:0 9px 22px rgba(244,180,77,.18)}
    .btn-primary:hover{background:#ffd078}
    .btn-ghost{border:1px solid rgba(255,255,255,.24);color:var(--white);background:rgba(255,255,255,.05)}
    .btn-ghost:hover{background:rgba(255,255,255,.12)}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
    .hero-stats{position:absolute;z-index:2;bottom:23px;display:flex;gap:30px;color:var(--muted);font-size:13px}
    .hero-stats strong{display:block;color:var(--white);font-size:22px;line-height:1.2}
    main>section{padding:82px 0}
    .section-dark{background:#0e151b;border-top:1px solid rgba(255,255,255,.035);border-bottom:1px solid rgba(255,255,255,.035)}
    .section-panel{background:var(--panel)}
    .metric-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
    .metric{padding:26px 24px;background:var(--panel);border-right:1px solid var(--line)}
    .metric:last-child{border-right:0}
    .metric strong{display:block;font-size:29px;color:var(--accent-2)}
    .metric span{color:var(--muted);font-size:13px}
    .matrix-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
    .matrix-card{min-height:172px;padding:24px;border:1px solid var(--line);background:#121b22;border-radius:var(--radius);transition:.2s ease}
    .matrix-card:hover{border-color:rgba(244,180,77,.5);transform:translateY(-4px);box-shadow:var(--shadow)}
    .matrix-icon{color:var(--accent);font-size:24px;font-weight:900}
    .matrix-card h3{margin:25px 0 8px;font-size:18px}
    .matrix-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.8}
    .content-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
    .content-card{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);transition:.22s ease}
    .content-card:hover{transform:translateY(-5px);border-color:rgba(238,91,67,.58);box-shadow:var(--shadow)}
    .poster{position:relative;height:235px;overflow:hidden}
    .poster img{height:100%;transition:transform .35s ease}
    .content-card:hover .poster img{transform:scale(1.05)}
    .badge{position:absolute;z-index:1;top:12px;left:12px;padding:3px 7px;color:#101418;border-radius:4px;background:var(--accent-2);font-size:11px;font-weight:800}
    .badge.mint{background:var(--mint)}
    .card-body{padding:16px 16px 18px}
    .card-title{font-size:16px;font-weight:700}
    .card-desc{margin:6px 0 0;color:var(--muted);font-size:12px;line-height:1.7}
    .card-meta{display:flex;justify-content:space-between;gap:8px;margin-top:10px;color:var(--muted);font-size:12px}
    .rating{color:var(--accent-2);font-weight:700}
    .feature-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:22px}
    .feature-card{min-height:390px;display:flex;align-items:end;padding:30px;border-radius:var(--radius);overflow:hidden;background:linear-gradient(0deg,rgba(6,10,13,.94),rgba(6,10,13,.08)),url("https://images.unsplash.com/photo-1517604931442-7e0c8ed2963c?auto=format&fit=crop&w=1200&q=85") center/cover}
    .feature-card h3{margin:9px 0;font-size:30px;line-height:1.25}
    .feature-card p{max-width:470px;margin:0;color:#d5dde2}
    .insight-panel{padding:30px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
    .insight-panel h3{margin:0 0 20px;font-size:21px}
    .insight-row{display:flex;justify-content:space-between;gap:18px;padding:16px 0;border-bottom:1px solid var(--line)}
    .insight-row:last-child{border-bottom:0}
    .insight-row span{color:var(--muted);font-size:13px}
    .insight-row strong{color:var(--soft)}
    .ranking-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:26px}
    .rank-list{border-top:1px solid var(--line)}
    .rank-item{display:grid;grid-template-columns:44px 1fr auto auto;align-items:center;gap:15px;padding:15px 0;border-bottom:1px solid var(--line)}
    .rank-no{color:var(--accent);font-size:20px;font-weight:900}
    .rank-name{font-weight:700}
    .rank-kind{color:var(--muted);font-size:12px}
    .rank-score{color:var(--accent-2);font-weight:800}
    .rank-bar{width:86px;height:5px;border-radius:9px;background:#27333a;overflow:hidden}
    .rank-bar i{display:block;height:100%;background:var(--accent);border-radius:inherit}
    .news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .news-item{display:grid;grid-template-columns:112px 1fr;gap:15px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);transition:.2s}
    .news-item:hover{border-color:rgba(244,180,77,.45);transform:translateY(-3px)}
    .news-item img{height:84px;border-radius:9px}
    .news-item h3{margin:0;font-size:15px;line-height:1.5}
    .news-item time{display:block;margin-top:8px;color:var(--muted);font-size:12px}
    .faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}
    .faq-item{padding:22px 24px;border:1px solid var(--line);border-radius:var(--radius);background:#121b22}
    .faq-item h3{margin:0 0 8px;font-size:16px}
    .faq-item p{margin:0;color:var(--muted);font-size:13px;line-height:1.85}
    .cta-band{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:34px;border:1px solid rgba(244,180,77,.3);border-radius:var(--radius);background:linear-gradient(100deg,#19242a,#111920)}
    .cta-band h2{margin:0 0 8px;font-size:28px}
    .cta-band p{margin:0;color:var(--muted)}
    footer{padding:58px 0 22px;background:#080c10;border-top:1px solid var(--line)}
    .footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:35px}
    .footer-intro p{max-width:310px;margin:16px 0 0;color:var(--muted);font-size:13px;line-height:1.9}
    footer h3{margin:5px 0 14px;font-size:14px}
    footer ul{list-style:none;margin:0;padding:0}
    footer li{margin:9px 0;color:var(--muted);font-size:13px}
    footer li a:hover{color:var(--accent-2)}
    .copyright{margin-top:42px;padding-top:18px;border-top:1px solid var(--line);color:#687681;font-size:12px}
    @media(max-width:1024px){
      .matrix-grid,.content-grid{grid-template-columns:repeat(3,1fr)}
      .feature-layout,.ranking-layout{grid-template-columns:1fr}
      .news-grid{grid-template-columns:repeat(2,1fr)}
    }
    @media(max-width:768px){
      .container{width:min(var(--container),calc(100% - 32px))}
      .nav-shell{gap:12px;min-height:68px}
      .brand-name{font-size:15px}
      .nav-links{gap:2px;overflow-x:auto}
      .nav-links a{padding:8px 9px;font-size:13px;white-space:nowrap}
      .nav-tag{display:none}
      .hero{min-height:590px}
      .hero-query{max-width:none}
      .metric-grid{grid-template-columns:repeat(2,1fr)}
      .metric:nth-child(2){border-right:0}
      .metric:nth-child(-n+2){border-bottom:1px solid var(--line)}
      .matrix-grid,.content-grid{grid-template-columns:repeat(2,1fr)}
      .section-head{display:block}
      .section-head p{margin-top:12px}
      .footer-grid{grid-template-columns:repeat(2,1fr)}
    }
    @media(max-width:520px){
      main>section{padding:62px 0}
      .hero-content{padding:62px 0 100px}
      .hero h1{font-size:41px}
      .hero-lead{font-size:15px}
      .hero-query{display:block;padding:8px}
      .hero-query input{width:100%;height:43px}
      .hero-query .btn{width:100%;margin-top:7px}
      .hero-stats{gap:16px;font-size:11px}
      .hero-stats strong{font-size:18px}
      .metric-grid,.matrix-grid,.content-grid,.news-grid,.faq-grid{grid-template-columns:1fr}
      .poster{height:260px}
      .rank-item{grid-template-columns:34px 1fr auto}
      .rank-bar{display:none}
      .cta-band{display:block;padding:26px}
      .cta-band .btn{margin-top:20px;width:100%}
      .footer-grid{grid-template-columns:1fr 1fr;gap:24px}
      .footer-intro{grid-column:1/-1}
    }