/* roulang page: index */
:root{--ink:#f5f7fa;--muted:#9ca8b8;--bg:#0b1017;--panel:#121a24;--panel2:#182330;--line:rgba(255,255,255,.1);--cyan:#54d6d0;--orange:#ff9f5b;--radius:18px;--shadow:0 18px 50px rgba(0,0,0,.24)}
    *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Noto Sans SC","Microsoft YaHei",sans-serif;line-height:1.7}a{color:inherit;text-decoration:none}img{display:block;width:100%;object-fit:cover}button{font:inherit}.container{max-width:1180px}
    .site-header{position:sticky;top:0;z-index:20;background:rgba(11,16,23,.88);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.nav-shell{min-height:76px}.brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:.02em}.brand-mark{width:38px;height:38px;border-radius:11px;background:var(--cyan);color:#071419;display:grid;place-items:center;font-weight:900}.nav-link{color:var(--muted);font-size:14px;padding:.55rem .8rem!important;border-radius:9px;transition:.2s}.nav-link:hover,.nav-link.active{color:var(--ink);background:rgba(84,214,208,.1)}.nav-search{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:9px;padding:8px 12px;width:150px}.menu-btn{border:1px solid var(--line);color:var(--ink)}
    .hero{min-height:650px;position:relative;display:flex;align-items:end;overflow:hidden;background:#111}.hero-media{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(7,11,16,.92) 0%,rgba(7,11,16,.55) 46%,rgba(7,11,16,.3)),linear-gradient(0deg,rgba(7,11,16,.85),transparent 55%),url("https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?auto=format&fit=crop&w=2000&q=88");background-position:center;background-size:cover}.hero-content{position:relative;z-index:1;padding:110px 0 85px;max-width:760px}.eyebrow{color:var(--cyan);font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}.hero h1{font-size:clamp(2.4rem,5vw,5rem);line-height:1.12;margin:18px 0 22px;font-weight:850}.hero h1 span{color:var(--orange)}.hero-copy{font-size:18px;color:#d2d9e2;max-width:700px}.btn-main{background:var(--cyan);color:#081317;border:0;border-radius:10px;padding:12px 22px;font-weight:800}.btn-main:hover{background:#83ebe5;color:#061014}.btn-ghost{border:1px solid rgba(255,255,255,.25);color:var(--ink);border-radius:10px;padding:11px 22px}.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}.hero-stats{display:flex;gap:34px;margin-top:40px}.stat strong{display:block;font-size:25px}.stat small{color:var(--muted)}
    section{padding:88px 0}.section-dark{background:#0f1721}.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:30px}.section-kicker{color:var(--orange);font-size:12px;letter-spacing:.15em;font-weight:800}.section-title{font-size:clamp(1.7rem,3vw,2.6rem);margin:7px 0 0;font-weight:800}.section-desc{color:var(--muted);max-width:600px;margin:0}.text-link{color:var(--cyan);font-size:14px}
    .feature-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}.feature-item{background:var(--panel);padding:28px}.feature-icon{color:var(--cyan);font-size:25px}.feature-item h3{font-size:18px;margin:13px 0 7px}.feature-item p{margin:0;color:var(--muted);font-size:14px}
    .media-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;height:100%;transition:.25s}.media-card:hover{transform:translateY(-5px);border-color:rgba(84,214,208,.6);box-shadow:var(--shadow)}.media-img{aspect-ratio:16/10;position:relative}.media-img img{height:100%}.badge{position:absolute;top:12px;left:12px;background:rgba(8,13,18,.8);border:1px solid rgba(255,255,255,.18);color:var(--cyan);border-radius:6px;padding:3px 8px;font-size:11px;font-weight:800}.media-body{padding:16px}.media-title{font-size:16px;font-weight:750;margin:0 0 9px}.media-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:13px}.rating{color:var(--orange)}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
    .progress-band{background:linear-gradient(100deg,#172a31,#1c222b);border:1px solid rgba(84,214,208,.22);padding:28px;border-radius:var(--radius)}.progress-line{height:7px;background:#263642;border-radius:9px;overflow:hidden}.progress-line span{display:block;height:100%;width:76%;background:var(--cyan)}.progress-row{display:flex;justify-content:space-between;color:var(--muted);font-size:13px;margin-top:12px}
    .timeline{border-left:1px solid var(--line);padding-left:28px}.timeline-item{position:relative;padding:0 0 28px}.timeline-item:before{content:"";position:absolute;left:-34px;top:8px;width:11px;height:11px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 5px rgba(84,214,208,.12)}.timeline-item h3{font-size:17px;margin:0 0 5px}.timeline-item p{color:var(--muted);font-size:14px;margin:0}
    .log-list,.ranking{border-top:1px solid var(--line)}.log-item,.rank-item{display:flex;align-items:center;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}.log-date,.rank-number{color:var(--cyan);font-weight:800;min-width:82px}.log-item p{margin:0;color:var(--muted)}.rank-number{font-size:22px;min-width:38px}.rank-info{flex:1}.rank-info strong{display:block}.rank-info small{color:var(--muted)}.rank-score{color:var(--orange);font-weight:800}
    .category-card{padding:25px;background:transparent;border:1px solid var(--line);border-radius:var(--radius);transition:.2s}.category-card:hover{background:var(--panel);border-color:var(--cyan)}.category-card h3{margin:0 0 10px;font-size:18px}.category-card p{margin:0;color:var(--muted);font-size:14px}
    .news-card{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center;border-bottom:1px solid var(--line);padding:16px 0}.news-card img{height:78px;border-radius:10px}.news-card h3{font-size:15px;margin:0 0 5px}.news-card time{font-size:12px;color:var(--muted)}
    .quote{background:var(--panel);border-left:3px solid var(--orange);padding:27px;border-radius:0 var(--radius) var(--radius) 0;color:#dce3ea}.quote p{margin:0 0 14px}.quote small{color:var(--muted)}
    .faq .accordion-item{background:transparent;border-color:var(--line)}.faq .accordion-button{background:var(--panel);color:var(--ink);font-weight:700}.faq .accordion-button:not(.collapsed){color:var(--cyan);box-shadow:none}.faq .accordion-body{background:#101923;color:var(--muted)}
    .subscribe{background:#16242a;border:1px solid rgba(84,214,208,.25);padding:40px;border-radius:var(--radius)}.subscribe input{background:#0c141b;border:1px solid var(--line);color:var(--ink);padding:12px 15px;border-radius:9px;min-width:260px}.subscribe input:focus{outline:2px solid var(--cyan);outline-offset:2px}
    footer{background:#080d13;border-top:1px solid var(--line);padding:58px 0 25px}.footer-brand{font-size:19px;font-weight:800}.footer-copy{color:var(--muted);font-size:13px;max-width:310px}.footer-title{font-size:14px;font-weight:800;margin-bottom:15px}.footer-links{display:grid;gap:8px;color:var(--muted);font-size:13px}.footer-links a:hover{color:var(--cyan)}.copyright{border-top:1px solid var(--line);margin-top:40px;padding-top:20px;color:#697786;font-size:12px}
    @media(max-width:992px){.grid-4{grid-template-columns:repeat(3,1fr)}.nav-search{display:none}.hero{min-height:590px}}
    @media(max-width:768px){section{padding:64px 0}.hero-content{padding:90px 0 65px}.feature-strip,.grid-3{grid-template-columns:1fr}.grid-4{grid-template-columns:repeat(2,1fr)}.section-head{display:block}.section-head .text-link{display:inline-block;margin-top:14px}.hero-stats{gap:20px}.hero-stats strong{font-size:20px}}
    @media(max-width:520px){.brand{font-size:14px}.brand-mark{width:34px;height:34px}.hero h1{font-size:2.3rem}.hero-copy{font-size:16px}.hero-actions{display:grid;gap:10px}.hero-actions .btn{width:100%}.grid-4{grid-template-columns:1fr}.subscribe{padding:25px}.subscribe form{display:grid!important}.subscribe input{min-width:0}.news-card{grid-template-columns:90px 1fr}.news-card img{height:65px}}

/* roulang page: category1 */
:root{--ink:#f5f7fa;--muted:#9ca8b8;--bg:#0b1017;--panel:#121a24;--panel2:#182330;--line:rgba(255,255,255,.1);--cyan:#54d6d0;--orange:#ff9f5b;--radius:18px;--shadow:0 18px 50px rgba(0,0,0,.24)}
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Noto Sans SC","Microsoft YaHei",sans-serif;line-height:1.7}
        a{color:inherit;text-decoration:none}
        img{display:block;width:100%;object-fit:cover}
        button{font:inherit}
        .container{max-width:1180px}
        .site-header{position:sticky;top:0;z-index:20;background:rgba(11,16,23,.9);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
        .nav-shell{min-height:76px}
        .brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:.02em}
        .brand-mark{width:38px;height:38px;border-radius:11px;background:var(--cyan);color:#071419;display:grid;place-items:center;font-weight:900}
        .nav-link{color:var(--muted);font-size:14px;padding:.55rem .8rem!important;border-radius:9px;transition:.2s}
        .nav-link:hover,.nav-link.active{color:var(--ink);background:rgba(84,214,208,.1)}
        .nav-search{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:9px;padding:8px 12px;width:150px;display:none}
        .menu-btn{border:1px solid var(--line);color:var(--ink)}
        main{overflow:hidden}
        .category-hero{padding:100px 0 72px;background:linear-gradient(135deg,#101b25 0%,#0b1017 62%);border-bottom:1px solid var(--line)}
        .eyebrow,.section-kicker{color:var(--cyan);font-size:12px;letter-spacing:.16em;font-weight:800}
        .category-hero h1{font-size:clamp(2.4rem,5vw,4.8rem);line-height:1.12;margin:16px 0 20px;font-weight:850}
        .category-hero h1 span{color:var(--orange)}
        .hero-summary{max-width:720px;color:#d2d9e2;font-size:18px}
        .hero-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
        .hero-pill{padding:8px 13px;border:1px solid var(--line);border-radius:9px;color:var(--muted);font-size:13px;background:rgba(255,255,255,.025)}
        section{padding:76px 0}
        .section-dark{background:#0f1721}
        .section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:30px}
        .section-title{font-size:clamp(1.7rem,3vw,2.5rem);margin:7px 0 0;font-weight:800}
        .section-desc{color:var(--muted);max-width:590px;margin:0}
        .text-link{color:var(--cyan);font-size:14px}
        .category-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:stretch}
        .category-feature{min-height:330px;position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#111}
        .category-feature img{height:100%;position:absolute;inset:0}
        .category-feature:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,9,13,.92),rgba(5,9,13,.08) 75%)}
        .feature-caption{position:absolute;z-index:1;left:28px;right:28px;bottom:25px}
        .feature-caption h2{font-size:27px;margin:10px 0 6px}
        .feature-caption p{margin:0;color:#c8d0d8;font-size:14px}
        .topic-list{display:grid;gap:12px}
        .topic-row{display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:16px;padding:17px 18px;border:1px solid var(--line);border-radius:13px;background:var(--panel);transition:.2s}
        .topic-row:hover{border-color:rgba(84,214,208,.65);transform:translateX(4px)}
        .topic-index{color:var(--orange);font-weight:850;font-size:18px}
        .topic-row strong{display:block;font-size:15px}
        .topic-row small{color:var(--muted);font-size:12px}
        .topic-arrow{color:var(--cyan);font-size:20px}
        .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
        .media-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;height:100%;transition:.25s}
        .media-card:hover{transform:translateY(-5px);border-color:rgba(84,214,208,.6);box-shadow:var(--shadow)}
        .media-img{aspect-ratio:16/10;position:relative}
        .media-img img{height:100%}
        .badge{position:absolute;top:12px;left:12px;background:rgba(8,13,18,.8);border:1px solid rgba(255,255,255,.18);color:var(--cyan);border-radius:6px;padding:3px 8px;font-size:11px;font-weight:800}
        .media-body{padding:16px}
        .media-title{font-size:16px;font-weight:750;margin:0 0 9px}
        .media-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:13px}
        .rating{color:var(--orange)}
        .matrix{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
        .matrix-item{background:var(--panel);padding:26px;min-height:170px;transition:.2s}
        .matrix-item:hover{background:var(--panel2)}
        .matrix-item h3{font-size:18px;margin:0 0 10px}
        .matrix-item p{color:var(--muted);font-size:14px;margin:0}
        .matrix-no{font-size:12px;color:var(--orange);font-weight:800;letter-spacing:.1em}
        .ranking{border-top:1px solid var(--line)}
        .rank-item{display:grid;grid-template-columns:52px 1fr 110px 70px 80px;align-items:center;gap:18px;padding:17px 0;border-bottom:1px solid var(--line)}
        .rank-number{font-size:22px;font-weight:850;color:var(--orange)}
        .rank-title{font-weight:750}
        .rank-sub{display:block;color:var(--muted);font-size:12px}
        .heat{height:5px;background:#263441;border-radius:99px;overflow:hidden}
        .heat i{display:block;height:100%;background:var(--cyan);border-radius:99px}
        .rank-score{color:var(--orange);font-weight:800}
        .category-tag{border:1px solid var(--line);border-radius:6px;padding:3px 7px;color:var(--muted);font-size:11px;text-align:center}
        .news-card{display:grid;grid-template-columns:130px 1fr;gap:16px;align-items:center;border-bottom:1px solid var(--line);padding:16px 0}
        .news-card img{height:82px;border-radius:10px}
        .news-card h3{font-size:15px;margin:0 0 5px}
        .news-card p{font-size:13px;color:var(--muted);margin:0 0 5px}
        .news-card time{font-size:12px;color:var(--muted)}
        .faq .accordion-item{background:transparent;border-color:var(--line)}
        .faq .accordion-button{background:var(--panel);color:var(--ink);font-weight:700}
        .faq .accordion-button:not(.collapsed){color:var(--cyan);box-shadow:none}
        .faq .accordion-body{background:#101923;color:var(--muted)}
        .closing-band{background:var(--panel2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
        .closing-inner{display:flex;justify-content:space-between;align-items:center;gap:30px}
        .closing-inner h2{font-size:clamp(1.6rem,3vw,2.5rem);margin:0 0 8px}
        .closing-inner p{margin:0;color:var(--muted)}
        .btn-main{background:var(--cyan);color:#081317;border:0;border-radius:10px;padding:12px 22px;font-weight:800;display:inline-block;transition:.2s}
        .btn-main:hover{background:#83ebe5;color:#061014;transform:translateY(-2px)}
        .btn-ghost{border:1px solid rgba(255,255,255,.25);color:var(--ink);border-radius:10px;padding:11px 22px;display:inline-block}
        .btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}
        footer{background:#080d13;border-top:1px solid var(--line);padding:58px 0 25px}
        .footer-brand{font-size:19px;font-weight:800}
        .footer-copy{color:var(--muted);font-size:13px;max-width:310px}
        .footer-title{font-size:14px;font-weight:800;margin-bottom:15px}
        .footer-links{display:grid;gap:8px;color:var(--muted);font-size:13px}
        .footer-links a:hover{color:var(--cyan)}
        .copyright{border-top:1px solid var(--line);margin-top:40px;padding-top:20px;color:#697786;font-size:12px}
        @media(max-width:992px){
            .category-layout{grid-template-columns:1fr}
            .grid-4{grid-template-columns:repeat(2,1fr)}
            .matrix{grid-template-columns:repeat(2,1fr)}
        }
        @media(max-width:768px){
            .category-hero{padding:75px 0 55px}
            section{padding:58px 0}
            .section-head{display:block}
            .section-head .text-link{display:inline-block;margin-top:14px}
            .rank-item{grid-template-columns:40px 1fr 72px}
            .rank-item .heat,.rank-item .category-tag{display:none}
            .closing-inner{display:block}
            .closing-inner .btn-main{margin-top:22px}
        }
        @media(max-width:520px){
            .brand{font-size:14px}
            .brand-mark{width:34px;height:34px}
            .category-hero h1{font-size:2.35rem}
            .hero-summary{font-size:16px}
            .grid-4,.matrix{grid-template-columns:1fr}
            .topic-row{grid-template-columns:40px 1fr auto}
            .news-card{grid-template-columns:95px 1fr}
            .news-card img{height:68px}
            .rank-item{gap:10px}
        }