/* roulang page: index */
:root{
            --ink:#17131e;
            --ink-2:#211b2b;
            --panel:#2b2335;
            --panel-2:#33283a;
            --paper:#f3eadb;
            --muted:#b9adbd;
            --line:#59485e;
            --orange:#e98655;
            --amber:#f2b866;
            --teal:#76b7a8;
            --purple:#aa92ce;
            --shadow:0 22px 55px rgba(6,3,12,.28);
            --radius:16px;
        }
        *,*::before,*::after{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            color:var(--paper);
            background:
                radial-gradient(circle at 15% 0%,rgba(120,76,126,.18),transparent 28rem),
                linear-gradient(135deg,#17131e 0%,#211925 48%,#18131e 100%);
            font-family:"Microsoft YaHei","PingFang SC","Noto Sans CJK SC",Arial,sans-serif;
            line-height:1.8;
            font-size:16px;
        }
        a{color:inherit;text-decoration:none;transition:.25s ease}
        img{max-width:100%;display:block}
        button,input,textarea,select{font:inherit}
        .container{max-width:1220px}
        .topline{
            min-height:36px;
            background:#110e17;
            border-bottom:1px solid #352b3d;
            color:#a99dad;
            font-size:13px;
        }
        .topline a{color:var(--amber)}
        .topline a:hover{color:#fff0ce}
        .main-nav{
            position:sticky;
            top:0;
            z-index:1000;
            background:rgba(27,20,31,.94);
            border-bottom:1px solid var(--line);
            box-shadow:0 8px 26px rgba(0,0,0,.16);
            backdrop-filter:blur(12px);
        }
        .navbar-brand{
            color:var(--paper)!important;
            font-weight:800;
            letter-spacing:.02em;
            font-size:1.05rem;
            white-space:nowrap;
        }
        .brand-mark{
            width:34px;height:34px;
            display:inline-grid;place-items:center;
            margin-right:9px;
            color:#241822;
            background:var(--amber);
            border-radius:9px 3px 9px 3px;
            box-shadow:0 0 20px rgba(242,184,102,.22);
        }
        .nav-link{
            color:#c6bac8!important;
            padding:.7rem 1rem!important;
            font-size:14px;
            border-bottom:2px solid transparent;
        }
        .nav-link:hover,.nav-link.active{color:#fff!important;border-color:var(--orange)}
        .navbar-toggler{border:1px solid var(--line);padding:.45rem .65rem}
        .navbar-toggler:focus{box-shadow:0 0 0 3px rgba(233,134,85,.25)}
        .hero{
            padding:92px 0 72px;
            position:relative;
            overflow:hidden;
        }
        .hero::before{
            content:"";
            position:absolute;inset:0;
            opacity:.18;
            background-image:linear-gradient(90deg,transparent 49%,#8b657d 50%,transparent 51%),linear-gradient(#8b657d 1px,transparent 1px);
            background-size:90px 90px;
            mask-image:linear-gradient(to bottom,black,transparent);
            pointer-events:none;
        }
        .eyebrow,.section-kicker{
            color:var(--amber);
            text-transform:uppercase;
            letter-spacing:.16em;
            font-size:12px;
            font-weight:700;
        }
        h1,h2,h3{line-height:1.25;margin:0 0 18px;font-weight:800;letter-spacing:-.03em}
        h1{font-size:clamp(2.4rem,5vw,4.8rem);max-width:760px}
        h2{font-size:clamp(1.8rem,3vw,2.7rem)}
        h3{font-size:1.18rem}
        .hero-copy{max-width:700px;color:#c8bdc9;font-size:18px;margin-bottom:28px}
        .btn-main,.btn-outline,.btn-small{
            display:inline-flex;align-items:center;justify-content:center;
            min-height:46px;padding:0 20px;border-radius:9px;
            font-weight:700;border:1px solid transparent;
            transition:.25s ease;
        }
        .btn-main{background:var(--orange);color:#24151a;box-shadow:0 8px 24px rgba(233,134,85,.2)}
        .btn-main:hover{background:#f3a16e;color:#24151a;transform:translateY(-3px)}
        .btn-outline{border-color:#806276;color:var(--paper);background:#251d2b}
        .btn-outline:hover{border-color:var(--amber);color:var(--amber);transform:translateY(-3px)}
        .btn-small{min-height:38px;padding:0 14px;background:#403044;border-color:#69536d;font-size:14px}
        .btn-small:hover{background:var(--orange);color:#24151a;border-color:var(--orange)}
        .btn-main:focus,.btn-outline:focus,.btn-small:focus,a:focus,input:focus,textarea:focus,select:focus{outline:3px solid rgba(242,184,102,.45);outline-offset:3px}
        .hero-points{display:flex;gap:26px;flex-wrap:wrap;margin-top:28px;color:#b7aab9;font-size:14px}
        .hero-points strong{display:block;color:var(--paper);font-size:22px;line-height:1.2}
        .index-panel{
            position:relative;
            min-height:390px;
            padding:26px;
            background:linear-gradient(145deg,#3a2b3e,#241d2d);
            border:1px solid #74566d;
            border-radius:24px 8px 24px 10px;
            box-shadow:var(--shadow),inset 0 0 0 1px rgba(242,184,102,.08);
        }
        .index-panel::after{content:"";position:absolute;width:80px;height:4px;right:28px;top:28px;background:var(--orange);box-shadow:0 0 16px var(--orange)}
        .panel-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #59485e;padding-bottom:16px;margin-bottom:20px}
        .status{color:var(--teal);font-size:13px}
        .node-map{position:relative;height:190px;margin:22px 4px}
        .node-map::before{content:"";position:absolute;left:8%;right:8%;top:50%;height:1px;background:#806276;transform:rotate(-13deg)}
        .node{position:absolute;padding:12px 14px;background:#201925;border:1px solid #82657d;border-radius:10px;font-size:14px;box-shadow:0 0 22px rgba(170,146,206,.12)}
        .node::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--amber);margin-right:7px;box-shadow:0 0 9px var(--amber)}
        .node.n1{left:0;top:28px}.node.n2{right:0;top:0}.node.n3{left:24%;bottom:0}.node.n4{right:13%;bottom:16px}
        .panel-foot{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
        .panel-foot div{padding:11px;background:#241b2a;border:1px solid #4b3b50;border-radius:8px}
        .panel-foot b{display:block;color:var(--amber);font-size:20px}
        section{padding:82px 0}
        .section-head{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:32px}
        .section-head p{max-width:570px;color:var(--muted);margin:0}
        .metric-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr 1.15fr;gap:16px}
        .metric{padding:24px;background:#271f2e;border:1px solid #4c3b51;border-radius:12px;position:relative;overflow:hidden}
        .metric::before{content:"";position:absolute;left:0;top:0;width:4px;height:100%;background:var(--orange)}
        .metric:nth-child(2)::before{background:var(--teal)}.metric:nth-child(3)::before{background:var(--purple)}
        .metric strong{font-size:2.15rem;display:block;color:var(--paper);line-height:1.1}
        .metric span{color:var(--amber);font-size:13px}.metric p{color:var(--muted);font-size:14px;margin:8px 0 0}
        .matrix{display:grid;grid-template-columns:1.25fr .85fr 1fr;gap:18px}
        .matrix-card{padding:26px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);transition:.25s}
        .matrix-card:hover{transform:translateY(-4px);border-color:var(--orange);box-shadow:0 14px 30px rgba(0,0,0,.18)}
        .matrix-card.tall{grid-row:span 2;background:linear-gradient(150deg,#4b303a,#2c2434)}
        .matrix-card.wide{grid-column:span 2}
        .number{color:var(--orange);font-size:13px;font-weight:800;letter-spacing:.1em}
        .matrix-card p,.compare p,.faq-answer{color:var(--muted);font-size:14px}
        .tag{display:inline-block;padding:3px 9px;border-radius:5px;background:#3a3045;color:#c5b7d4;font-size:12px;margin:4px 4px 0 0}
        .tag.warm{background:#543b39;color:#f2bf91}.tag.green{background:#29433e;color:#9ad1c2}
        .compare-wrap{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
        .compare{padding:30px;border:1px solid var(--line);background:#251d2b;border-radius:14px}
        .compare.highlight{border-color:var(--orange);background:#352633}
        .compare-label{font-size:13px;color:var(--muted);display:flex;justify-content:space-between}
        .bar{height:8px;background:#443746;border-radius:8px;margin:18px 0 12px;overflow:hidden}.bar i{display:block;height:100%;background:var(--teal);border-radius:8px}.highlight .bar i{background:var(--orange)}
        .step-list{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
        .step{padding:22px 20px;border-left:2px solid var(--line);background:#241c2a}.step b{color:var(--amber);font-size:1.4rem}.step h3{margin-top:12px}
        .faq-list{max-width:900px;margin:auto}.accordion-item{background:#28202f!important;border:1px solid var(--line)!important;margin-bottom:10px;border-radius:10px!important;overflow:hidden}
        .accordion-button{background:#28202f!important;color:var(--paper)!important;font-weight:700;box-shadow:none!important}.accordion-button::after{filter:invert(1) sepia(1) saturate(2)}.accordion-body{color:var(--muted);background:#211a27}
        .form-box{background:linear-gradient(120deg,#39283a,#251e2e);border:1px solid #6a5061;border-radius:20px;padding:38px}
        .form-label{color:#d7c8d4;font-size:14px}.form-control,.form-select{background:#1e1825;border:1px solid #58465b;color:var(--paper);min-height:48px;border-radius:8px}.form-control::placeholder{color:#827584}.form-control:focus,.form-select:focus{background:#211a29;color:var(--paper);border-color:var(--orange);box-shadow:none}
        footer{padding:45px 0 24px;background:#110e17;border-top:1px solid #3a2c40;color:#a89cac}.footer-brand{color:var(--paper);font-weight:800;font-size:18px}.footer-links a{color:#b9acba;margin-right:18px;font-size:14px}.footer-links a:hover{color:var(--amber)}.copyright{border-top:1px solid #332838;margin-top:28px;padding-top:18px;font-size:13px}
        @media(max-width:992px){.metric-grid{grid-template-columns:repeat(2,1fr)}.matrix{grid-template-columns:1fr 1fr}.matrix-card.tall{grid-row:auto}.matrix-card.wide{grid-column:span 2}.step-list{grid-template-columns:repeat(2,1fr)}}
        @media(max-width:768px){.hero{padding:62px 0 45px}.section-head{display:block}.section-head p{margin-top:12px}.hero-copy{font-size:16px}.index-panel{margin-top:34px;min-height:350px}.compare-wrap{grid-template-columns:1fr}section{padding:58px 0}.navbar-collapse{padding:12px 0}.nav-link{padding:.65rem 0!important}}
        @media(max-width:520px){.metric-grid,.matrix,.step-list{grid-template-columns:1fr}.matrix-card.wide{grid-column:auto}.panel-foot{grid-template-columns:1fr 1fr 1fr;gap:6px}.panel-foot div{padding:8px 5px;font-size:12px}.panel-foot b{font-size:17px}.node{font-size:12px;padding:9px}.hero-points{gap:16px}.form-box{padding:24px 18px}.topline .container{white-space:normal;line-height:1.4;padding-top:6px;padding-bottom:6px}}

/* roulang page: category1 */
:root{
      --ink:#17131e;
      --ink-2:#211b2b;
      --panel:#2b2335;
      --panel-2:#33283a;
      --paper:#f3eadb;
      --muted:#b9adbd;
      --line:#59485e;
      --orange:#e98655;
      --amber:#f2b866;
      --teal:#76b7a8;
      --purple:#aa92ce;
      --shadow:0 22px 55px rgba(6,3,12,.28);
      --radius:16px;
    }
    *,*::before,*::after{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;color:var(--paper);font-family:"Microsoft YaHei","PingFang SC","Noto Sans CJK SC",Arial,sans-serif;
      line-height:1.8;font-size:16px;background:
      radial-gradient(circle at 12% 0%,rgba(120,76,126,.18),transparent 28rem),
      linear-gradient(135deg,#17131e 0%,#211925 48%,#18131e 100%);
    }
    a{color:inherit;text-decoration:none;transition:.25s ease}
    img{max-width:100%;display:block}
    button,input,textarea,select{font:inherit}
    .container{max-width:1220px}
    .topline{font-size:13px;color:#b9adbd;background:#110e17;border-bottom:1px solid #332838;padding:7px 0}
    .topline a{color:var(--amber)}
    .topline a:hover{color:#fff0ce}
    .main-nav{position:sticky;top:0;z-index:1000;background:rgba(27,20,31,.95);border-bottom:1px solid var(--line);box-shadow:0 8px 26px rgba(0,0,0,.16);backdrop-filter:blur(12px)}
    .navbar{min-height:70px}
    .navbar-brand{color:var(--paper)!important;font-weight:800;letter-spacing:.02em;font-size:1.05rem;white-space:nowrap}
    .brand-mark{width:34px;height:34px;display:inline-grid;place-items:center;margin-right:9px;color:#241822;background:var(--amber);border-radius:9px 3px 9px 3px;box-shadow:0 0 20px rgba(242,184,102,.22)}
    .nav-link{color:#c6bac8!important;padding:.7rem 1rem!important;font-size:14px;border-bottom:2px solid transparent}
    .nav-link:hover,.nav-link.active{color:#fff!important;border-color:var(--orange)}
    .navbar-toggler{border:1px solid var(--line);padding:.45rem .65rem}
    .navbar-toggler:focus{box-shadow:0 0 0 3px rgba(233,134,85,.25)}
    .btn-small,.btn-main,.btn-outline{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border-radius:9px;font-weight:700;border:1px solid transparent;transition:.25s ease}
    .btn-small{min-height:38px;padding:0 14px;background:#403044;border-color:#69536d;font-size:14px}
    .btn-small:hover{background:var(--orange);color:#24151a;border-color:var(--orange)}
    .btn-main{background:var(--orange);color:#24151a;box-shadow:0 8px 24px rgba(233,134,85,.2)}
    .btn-main:hover{background:#f3a16e;color:#24151a;transform:translateY(-3px)}
    .btn-outline{border-color:#806276;color:var(--paper);background:#251d2b}
    .btn-outline:hover{border-color:var(--amber);color:var(--amber);transform:translateY(-3px)}
    .btn-main:focus,.btn-outline:focus,.btn-small:focus,a:focus,input:focus,textarea:focus,select:focus{outline:3px solid rgba(242,184,102,.45);outline-offset:3px}
    .page-hero{padding:58px 0 54px;border-bottom:1px solid rgba(89,72,94,.55);background:linear-gradient(90deg,rgba(67,43,62,.4),transparent 72%)}
    .eyebrow,.section-kicker{color:var(--amber);text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:700}
    h1,h2,h3{line-height:1.3;letter-spacing:-.02em}
    h1{font-size:clamp(2rem,4vw,3.6rem);margin:12px 0 16px;color:#fff8ed;font-weight:800}
    h2{font-size:clamp(1.6rem,3vw,2.35rem);margin:8px 0 12px;color:#fff8ed}
    h3{font-size:1.18rem;color:#fff3e2}
    .lead-copy{max-width:760px;color:#c8bdc9;font-size:17px;margin:0}
    .crumbs{display:flex;gap:9px;align-items:center;flex-wrap:wrap;color:#9f91a4;font-size:14px;margin-bottom:18px}
    .crumbs a:hover{color:var(--amber)}
    .crumbs span:last-child{color:#ddcfc1}
    section{padding:76px 0}
    .section-head{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:30px}
    .section-head p{max-width:600px;color:var(--muted);margin:0}
    .index-panel{background:#251d2d;border:1px solid var(--line);border-radius:var(--radius);padding:25px;box-shadow:var(--shadow)}
    .filter-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
    .filter-title{width:76px;color:#d8c9d4;font-size:14px;font-weight:700}
    .filter-tag{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border:1px solid #625167;border-radius:8px;color:#bcaec0;background:#302539;font-size:14px}
    .filter-tag:hover,.filter-tag.active{color:#251820;border-color:var(--amber);background:var(--amber)}
    .filter-tag.active::before{content:"◆";font-size:8px;margin-right:7px}
    .index-note{margin-top:20px;padding-top:18px;border-top:1px solid #493b4f;color:#9f92a4;font-size:13px}
    .featured{display:grid;grid-template-columns:1.1fr 1.8fr;gap:28px;align-items:stretch}
    .cover-block{min-height:280px;border-radius:14px;border:1px solid #765463;background:
      radial-gradient(circle at 78% 22%,rgba(242,184,102,.35),transparent 5rem),
      linear-gradient(145deg,#593641,#2a2435 65%,#1f1928);position:relative;overflow:hidden;padding:25px}
    .cover-block::after{content:"精选入口";position:absolute;right:-34px;top:27px;transform:rotate(38deg);background:var(--orange);color:#271720;padding:4px 42px;font-size:12px;font-weight:800}
    .cover-symbol{font-size:66px;color:rgba(242,184,102,.85);font-weight:800;line-height:1;margin-top:36px}
    .feature-copy{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:30px}
    .tag{display:inline-block;padding:3px 9px;border-radius:5px;background:#3a3045;color:#c5b7d4;font-size:12px;margin:4px 4px 0 0}
    .tag.warm{background:#543b39;color:#f2bf91}
    .tag.green{background:#29433e;color:#9ad1c2}
    .feature-copy p,.content-card p,.notice{color:var(--muted);font-size:14px}
    .content-layout{display:grid;grid-template-columns:1.45fr .75fr;gap:24px}
    .content-list{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}
    .content-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;min-height:215px;transition:.25s ease;position:relative}
    .content-card:first-child{grid-row:span 2;background:linear-gradient(150deg,#3e2a3b,#2b2335)}
    .content-card:hover{transform:translateY(-4px);border-color:var(--orange);box-shadow:0 14px 30px rgba(0,0,0,.2)}
    .card-index{color:var(--amber);font-size:12px;letter-spacing:.12em}
    .content-card h3{margin:12px 0 8px}
    .card-meta{display:flex;justify-content:space-between;gap:12px;color:#a89cac;font-size:12px;border-top:1px solid #4b3b50;margin-top:18px;padding-top:14px}
    .side-note{height:100%;padding:25px;background:#211a29;border:1px solid #56455b;border-radius:14px}
    .side-note ul{padding:0;margin:20px 0 0;list-style:none}
    .side-note li{padding:12px 0;border-bottom:1px solid #423448;color:#bdb0be;font-size:14px}
    .side-note li::before{content:"✦";color:var(--orange);margin-right:9px}
    .pagination-wrap{display:flex;justify-content:center;margin-top:34px}
    .pagination .page-link{background:#2b2335;border:1px solid var(--line);color:#c7b9c8;margin:0 4px;border-radius:7px;padding:9px 15px}
    .pagination .page-link:hover,.pagination .active .page-link{background:var(--orange);border-color:var(--orange);color:#251820}
    .compare{display:grid;grid-template-columns:1fr 1fr;gap:18px}
    .compare-box{padding:25px;background:#2b2335;border:1px solid var(--line);border-radius:14px}
    .compare-box.highlight{border-color:#8a5b55;background:linear-gradient(140deg,#3b2a36,#2b2335)}
    .compare-label{display:flex;justify-content:space-between;color:#d8c9d4;font-weight:700;margin-bottom:13px}
    .track{height:8px;background:#191520;border-radius:10px;overflow:hidden}
    .track span{display:block;height:100%;background:var(--purple);border-radius:10px}
    .highlight .track span{background:var(--orange)}
    .compare p{margin:16px 0 0}
    .faq-list{max-width:900px;margin:auto}
    .accordion-item{background:#28202f!important;border:1px solid var(--line)!important;margin-bottom:10px;border-radius:10px!important;overflow:hidden}
    .accordion-button{background:#28202f!important;color:var(--paper)!important;font-weight:700;box-shadow:none!important;padding:18px 20px}
    .accordion-button::after{filter:invert(1) sepia(1) saturate(2)}
    .accordion-body{color:var(--muted);background:#211a27;padding:18px 20px}
    .cta-box{padding:40px;background:linear-gradient(120deg,#39283a,#251e2e);border:1px solid #6a5061;border-radius:20px}
    .cta-box p{color:var(--muted);max-width:650px}
    footer{padding:45px 0 24px;background:#110e17;border-top:1px solid #3a2c40;color:#a89cac}
    .footer-brand{color:var(--paper);font-weight:800;font-size:18px}
    .footer-links a{color:#b9acba;margin-right:18px;font-size:14px}
    .footer-links a:hover{color:var(--amber)}
    .copyright{border-top:1px solid #332838;margin-top:28px;padding-top:18px;font-size:13px}
    @media(max-width:991px){
      .navbar-collapse{background:#211a29;margin:10px -12px -8px;padding:12px;border-top:1px solid var(--line)}
      .featured,.content-layout{grid-template-columns:1fr}
      .content-list{grid-template-columns:1fr 1fr}
    }
    @media(max-width:767px){
      .topline .container{display:block;text-align:center}
      .topline .action{display:block;margin-top:2px}
      .page-hero{padding:44px 0 38px}
      section{padding:52px 0}
      .section-head{display:block;margin-bottom:24px}
      .section-head p{margin-top:12px}
      .content-list,.compare{grid-template-columns:1fr}
      .content-card:first-child{grid-row:auto}
      .filter-title{width:100%;margin-top:4px}
      .feature-copy,.index-panel,.side-note,.cta-box{padding:22px}
      .btn-main,.btn-outline{width:100%;margin-top:8px}
    }
    @media(max-width:520px){
      body{font-size:15px}
      .navbar-brand{font-size:.9rem}
      .brand-mark{width:30px;height:30px;margin-right:6px}
      h1{font-size:2rem}
      h2{font-size:1.65rem}
      .cover-block{min-height:220px}
      .pagination .page-link{padding:8px 11px;margin:0 2px}
    }