/* roulang page: index */
:root{
      --bg:#0e0b0c;
      --bg-2:#141011;
      --panel:#171213;
      --panel-2:#1d1718;
      --line:rgba(255,255,255,.09);
      --line-2:rgba(255,255,255,.14);
      --text:#f6f1ef;
      --muted:#c0b2ab;
      --muted-2:#8e807a;
      --accent:#e11d48;
      --accent-2:#ff5d7f;
      --gold:#f0c25b;
      --cyan:#62dad3;
      --success:#32c48d;
      --shadow:0 18px 40px rgba(0,0,0,.30);
      --shadow-soft:0 10px 22px rgba(0,0,0,.18);
      --radius:8px;
      --radius-sm:6px;
      --sidebar:270px;
      --topbar:66px;
      --container:1380px;
      --ease:cubic-bezier(.2,.8,.2,1);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:Inter,system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
      color:var(--text);
      background:
        linear-gradient(180deg, #0e0b0c 0%, #120f10 40%, #0b090a 100%);
      letter-spacing:0;
      text-rendering:optimizeLegibility;
      -webkit-font-smoothing:antialiased;
      overflow-x:hidden;
    }
    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(135deg, rgba(225,29,72,.09), transparent 38%),
        linear-gradient(225deg, rgba(98,218,211,.05), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.025) 0 1px, transparent 1px 100%);
      background-size:auto, auto, 100% 28px;
      opacity:.9;
      z-index:-2;
    }
    a{color:inherit;text-decoration:none;transition:color .2s var(--ease),opacity .2s var(--ease),transform .2s var(--ease)}
    a:hover{color:var(--text)}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    button:focus,input:focus,select:focus,textarea:focus,.btn:focus,.nav-link:focus,.form-control:focus,.form-select:focus{
      box-shadow:0 0 0 .18rem rgba(225,29,72,.18) !important;
      border-color:rgba(225,29,72,.65) !important;
    }
    .top-alert{
      position:sticky;
      top:0;
      z-index:1035;
      background:linear-gradient(90deg, rgba(225,29,72,.95), rgba(240,194,91,.88));
      color:#180c0f;
      border-bottom:1px solid rgba(255,255,255,.18);
      font-weight:700;
      letter-spacing:0;
    }
    .top-alert .inner{
      max-width:var(--container);
      margin:0 auto;
      padding:.65rem 1rem;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      font-size:.95rem;
    }
    .top-alert .meta{
      display:flex;
      align-items:center;
      gap:.75rem;
      flex-wrap:wrap;
    }
    .top-alert .tag{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding:.35rem .65rem;
      border-radius:999px;
      background:rgba(255,255,255,.18);
      color:#180c0f;
      font-weight:800;
      white-space:nowrap;
    }
    .layout{
      display:flex;
      min-height:100vh;
    }
    .sidebar{
      position:fixed;
      inset:0 auto 0 0;
      width:var(--sidebar);
      background:linear-gradient(180deg, rgba(18,14,15,.98), rgba(13,10,11,.98));
      border-right:1px solid var(--line);
      padding:1.1rem 1rem 1rem;
      display:flex;
      flex-direction:column;
      gap:1rem;
      z-index:1020;
      backdrop-filter:saturate(110%) blur(4px);
    }
    .brand{
      display:flex;
      align-items:center;
      gap:.8rem;
      padding:.85rem .9rem;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:rgba(255,255,255,.03);
      box-shadow:var(--shadow-soft);
    }
    .brand-mark{
      width:42px;height:42px;
      border-radius:10px;
      display:grid;
      place-items:center;
      background:
        linear-gradient(135deg, rgba(225,29,72,1), rgba(240,194,91,.92));
      color:#180c0f;
      font-size:1.1rem;
      font-weight:900;
      flex:0 0 auto;
    }
    .brand-text strong{
      display:block;
      font-size:1.03rem;
      line-height:1.15;
      margin-bottom:.25rem;
      color:var(--text);
    }
    .brand-text span{
      display:block;
      font-size:.82rem;
      color:var(--muted);
    }
    .sidebar-nav{
      display:flex;
      flex-direction:column;
      gap:.45rem;
    }
    .sidebar-nav .nav-link{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.8rem;
      padding:.86rem .92rem;
      border:1px solid transparent;
      border-radius:var(--radius);
      color:var(--muted);
      background:transparent;
      transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
    }
    .sidebar-nav .nav-link:hover{
      background:rgba(255,255,255,.04);
      border-color:var(--line);
      color:var(--text);
      transform:translateX(2px);
    }
    .sidebar-nav .nav-link.active{
      background:linear-gradient(135deg, rgba(225,29,72,.22), rgba(255,93,127,.14));
      border-color:rgba(225,29,72,.42);
      color:var(--text);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
    }
    .sidebar-nav .nav-link .bi{font-size:1rem;color:var(--gold)}
    .sidebar-block{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:rgba(255,255,255,.03);
      padding:.95rem;
    }
    .sidebar-block h6{
      margin:0 0 .55rem;
      font-size:.86rem;
      color:var(--text);
      letter-spacing:0;
    }
    .sidebar-block p{
      margin:0;
      color:var(--muted);
      font-size:.86rem;
      line-height:1.6;
    }
    .sidebar-actions{
      display:grid;
      gap:.65rem;
    }
    .btn{
      border-radius:var(--radius-sm);
      font-weight:700;
      letter-spacing:0;
      padding:.78rem 1rem;
      transition:transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease);
    }
    .btn:hover{transform:translateY(-1px)}
    .btn-accent{
      background:linear-gradient(135deg, var(--accent), var(--accent-2));
      border:1px solid rgba(255,255,255,.08);
      color:#fff;
      box-shadow:0 14px 28px rgba(225,29,72,.18);
    }
    .btn-accent:hover,.btn-accent:focus{
      color:#fff;
      background:linear-gradient(135deg, #f02254, #ff6c8d);
    }
    .btn-soft{
      background:rgba(255,255,255,.05);
      border:1px solid var(--line);
      color:var(--text);
    }
    .btn-soft:hover{background:rgba(255,255,255,.08);border-color:var(--line-2);color:var(--text)}
    .btn-outline-accent{
      background:transparent;
      border:1px solid rgba(225,29,72,.55);
      color:#ffd1da;
    }
    .btn-outline-accent:hover{
      background:rgba(225,29,72,.12);
      color:#fff;
      border-color:rgba(225,29,72,.82);
    }
    .content{
      margin-left:var(--sidebar);
      width:calc(100% - var(--sidebar));
      min-height:100vh;
    }
    .page-shell{
      max-width:var(--container);
      margin:0 auto;
      padding:1.25rem 1.25rem 2rem;
    }
    .mobile-topbar{
      display:none;
      position:sticky;
      top:0;
      z-index:1030;
      background:rgba(14,11,12,.92);
      backdrop-filter:blur(8px);
      border-bottom:1px solid var(--line);
    }
    .mobile-topbar .inner{
      max-width:var(--container);
      margin:0 auto;
      padding:.8rem 1rem;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.75rem;
    }
    .mobile-topbar .brand{
      padding:.35rem .55rem;
      border:none;
      background:transparent;
      box-shadow:none;
      gap:.6rem;
    }
    .mobile-topbar .brand-mark{
      width:36px;height:36px;
      border-radius:9px;
      font-size:.95rem;
    }
    .mobile-topbar .brand-text strong{font-size:.98rem;margin-bottom:.12rem}
    .mobile-topbar .brand-text span{font-size:.76rem}
    .icon-btn{
      width:42px;height:42px;
      border-radius:10px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.04);
      color:var(--text);
      display:grid;
      place-items:center;
    }
    .icon-btn:hover{background:rgba(255,255,255,.08);color:#fff}
    .hero{
      position:relative;
      overflow:hidden;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
        linear-gradient(145deg, rgba(225,29,72,.28) 0%, rgba(18,14,15,.88) 42%, rgba(8,8,9,.98) 100%);
      box-shadow:var(--shadow);
      padding:1.25rem;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:1.1fr .95fr;
      gap:1rem;
      align-items:stretch;
    }
    .hero-copy{
      display:flex;
      flex-direction:column;
      gap:1rem;
      min-height:100%;
      padding:1rem;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      width:max-content;
      padding:.38rem .7rem;
      border-radius:999px;
      background:rgba(255,255,255,.06);
      border:1px solid var(--line);
      color:#ffdfe7;
      font-size:.82rem;
      font-weight:700;
    }
    .eyebrow .dot{
      width:8px;height:8px;border-radius:999px;
      background:var(--gold);
      box-shadow:0 0 0 .24rem rgba(240,194,91,.15);
    }
    .hero h1{
      margin:0;
      font-size:clamp(2.3rem, 4vw, 4.4rem);
      line-height:1.02;
      letter-spacing:0;
      text-wrap:balance;
      max-width:11ch;
    }
    .hero p{
      margin:0;
      max-width:42rem;
      color:var(--muted);
      line-height:1.8;
      font-size:1rem;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.7rem;
      align-items:center;
    }
    .hero-stats{
      display:grid;
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:.75rem;
      margin-top:.2rem;
    }
    .stat{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:rgba(255,255,255,.03);
      padding:.9rem .85rem;
      box-shadow:var(--shadow-soft);
    }
    .stat strong{
      display:block;
      font-size:1.28rem;
      line-height:1.1;
      margin-bottom:.28rem;
      color:#fff;
    }
    .stat span{
      display:block;
      color:var(--muted);
      font-size:.83rem;
      line-height:1.45;
    }
    .hero-panel{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
        linear-gradient(180deg, rgba(19,15,16,.98), rgba(12,10,11,.98));
      padding:1rem;
      display:grid;
      gap:.9rem;
      min-height:100%;
    }
    .hero-visual{
      position:relative;
      min-height:420px;
      border:1px solid rgba(255,255,255,.08);
      border-radius:var(--radius);
      background:
        linear-gradient(180deg, rgba(225,29,72,.18), rgba(225,29,72,.04) 34%, rgba(7,6,7,.92) 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 24px);
      overflow:hidden;
      padding:1rem;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
    }
    .hero-visual:before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(180deg, transparent 0%, rgba(0,0,0,.2) 100%),
        linear-gradient(120deg, transparent 0 58%, rgba(255,255,255,.05) 58% 61%, transparent 61% 100%);
      pointer-events:none;
    }
    .visual-top{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:1rem;
      position:relative;
      z-index:1;
    }
    .visual-title{
      font-size:.92rem;
      font-weight:800;
      color:#fff;
    }
    .visual-chip{
      padding:.34rem .58rem;
      border-radius:999px;
      background:rgba(240,194,91,.14);
      color:#ffe6aa;
      border:1px solid rgba(240,194,91,.22);
      font-size:.76rem;
      font-weight:700;
      white-space:nowrap;
    }
    .visual-frame{
      position:relative;
      z-index:1;
      display:grid;
      gap:.75rem;
      grid-template-columns:1.05fr .95fr;
      align-items:stretch;
    }
    .frame-card{
      border:1px solid rgba(255,255,255,.08);
      border-radius:var(--radius);
      background:rgba(255,255,255,.04);
      padding:.8rem;
      min-height:120px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }
    .frame-card h3{
      margin:0;
      font-size:.98rem;
      line-height:1.3;
    }
    .frame-card p{
      margin:.35rem 0 0;
      color:var(--muted);
      font-size:.84rem;
      line-height:1.55;
    }
    .frame-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:.7rem;
    }
    .frame-metric{
      border:1px solid rgba(255,255,255,.08);
      border-radius:var(--radius-sm);
      background:rgba(8,8,9,.58);
      padding:.78rem .72rem;
      min-height:92px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }
    .frame-metric strong{
      font-size:1.2rem;
      color:#fff;
      display:block;
      line-height:1;
    }
    .frame-metric span{
      color:var(--muted);
      font-size:.8rem;
      line-height:1.45;
    }
    .quick-form{
      border:1px solid rgba(255,255,255,.08);
      border-radius:var(--radius);
      background:rgba(255,255,255,.04);
      padding:.9rem;
      position:relative;
      z-index:1;
    }
    .quick-form .label{
      color:#fff;
      font-size:.86rem;
      font-weight:700;
      margin-bottom:.55rem;
    }
    .quick-form .form-control,
    .quick-form .form-select{
      background:rgba(12,10,11,.92);
      border:1px solid var(--line);
      color:var(--text);
      border-radius:var(--radius-sm);
      padding:.72rem .85rem;
    }
    .quick-form .form-control::placeholder{color:#8d7e78}
    .quick-form .row{
      --bs-gutter-x:.6rem;
      --bs-gutter-y:.6rem;
    }
    .quick-form .btn{
      width:100%;
    }
    .strip{
      margin-top:1rem;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:rgba(255,255,255,.03);
      padding:.85rem;
      overflow:hidden;
      box-shadow:var(--shadow-soft);
    }
    .strip-track{
      display:flex;
      gap:.75rem;
      overflow-x:auto;
      padding-bottom:.2rem;
      scroll-snap-type:x mandatory;
    }
    .strip-track::-webkit-scrollbar{height:7px}
    .strip-track::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:999px}
    .strip-card{
      min-width:210px;
      scroll-snap-align:start;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      padding:.9rem;
      display:flex;
      align-items:flex-start;
      gap:.75rem;
      flex:0 0 auto;
    }
    .strip-icon{
      width:42px;height:42px;
      border-radius:10px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, rgba(225,29,72,.92), rgba(240,194,91,.88));
      color:#180c0f;
      flex:0 0 auto;
    }
    .strip-card strong{
      display:block;
      margin-bottom:.25rem;
      font-size:.96rem;
    }
    .strip-card span{
      display:block;
      color:var(--muted);
      font-size:.82rem;
      line-height:1.45;
    }
    .section{
      margin-top:1rem;
      padding:1.1rem 0 0;
    }
    .section-box{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:rgba(255,255,255,.03);
      padding:1rem;
      box-shadow:var(--shadow-soft);
    }
    .section-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:1rem;
      margin-bottom:.9rem;
    }
    .section-head h2{
      margin:0;
      font-size:1.48rem;
      line-height:1.15;
      letter-spacing:0;
      text-wrap:balance;
    }
    .section-head p{
      margin:0;
      color:var(--muted);
      line-height:1.7;
      max-width:52rem;
      font-size:.96rem;
    }
    .spot-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:.9rem;
    }
    .spot-card{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      padding:1rem;
      min-height:184px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      position:relative;
      overflow:hidden;
    }
    .spot-card:after{
      content:"";
      position:absolute;
      inset:auto -20% -35% auto;
      width:140px;height:140px;
      background:linear-gradient(135deg, rgba(225,29,72,.18), transparent 75%);
      transform:rotate(18deg);
      pointer-events:none;
    }
    .spot-card .num{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:38px;height:38px;
      border-radius:10px;
      background:rgba(225,29,72,.14);
      color:#ffd5de;
      border:1px solid rgba(225,29,72,.28);
      font-weight:800;
      margin-bottom:.8rem;
    }
    .spot-card h3{
      margin:0 0 .45rem;
      font-size:1.08rem;
    }
    .spot-card p{
      margin:0;
      color:var(--muted);
      line-height:1.65;
      font-size:.92rem;
    }
    .spot-foot{
      margin-top:.9rem;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.75rem;
      color:#ffe3e8;
      font-size:.83rem;
    }
    .spot-foot .bi{color:var(--gold)}
    .tier-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:.9rem;
    }
    .tier-card{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
      padding:1rem;
      min-height:170px;
    }
    .tier-card .tier-tag{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding:.28rem .55rem;
      border-radius:999px;
      background:rgba(98,218,211,.11);
      color:#b8fffb;
      border:1px solid rgba(98,218,211,.2);
      font-size:.78rem;
      font-weight:700;
      margin-bottom:.75rem;
    }
    .tier-card h3{
      margin:0 0 .4rem;
      font-size:1.02rem;
    }
    .tier-card p{
      margin:0;
      color:var(--muted);
      line-height:1.7;
      font-size:.92rem;
    }
    .tier-list{
      margin:.9rem 0 0;
      padding:0;
      list-style:none;
      display:grid;
      gap:.5rem;
    }
    .tier-list li{
      display:flex;
      align-items:flex-start;
      gap:.55rem;
      color:#efe4df;
      font-size:.88rem;
      line-height:1.45;
    }
    .tier-list i{color:var(--gold);margin-top:.14rem}
    .compare-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:.9rem;
    }
    .compare-card{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:rgba(255,255,255,.03);
      padding:1rem;
      position:relative;
      min-height:220px;
    }
    .compare-card .head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.75rem;
      margin-bottom:.8rem;
    }
    .compare-card .head strong{
      font-size:1rem;
    }
    .compare-card .head .badge{
      background:rgba(225,29,72,.16) !important;
      color:#ffd9e2 !important;
      border:1px solid rgba(225,29,72,.22);
      border-radius:999px;
      padding:.38rem .55rem;
      font-weight:700;
    }
    .compare-card ul{
      margin:0;
      padding:0;
      list-style:none;
      display:grid;
      gap:.55rem;
    }
    .compare-card li{
      display:flex;
      align-items:flex-start;
      gap:.55rem;
      color:var(--muted);
      line-height:1.55;
      font-size:.9rem;
    }
    .compare-card li i{
      color:var(--success);
      margin-top:.18rem;
      flex:0 0 auto;
    }
    .assurance{
      display:grid;
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:.75rem;
    }
    .assure-item{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:rgba(255,255,255,.03);
      padding:.9rem;
      display:flex;
      gap:.75rem;
      align-items:flex-start;
      min-height:124px;
    }
    .assure-icon{
      width:40px;height:40px;
      border-radius:10px;
      background:rgba(240,194,91,.13);
      color:#ffe29b;
      border:1px solid rgba(240,194,91,.16);
      display:grid;
      place-items:center;
      flex:0 0 auto;
    }
    .assure-item strong{
      display:block;
      margin-bottom:.25rem;
      font-size:.98rem;
    }
    .assure-item p{
      margin:0;
      color:var(--muted);
      font-size:.88rem;
      line-height:1.55;
    }
    .news-wrap{
      display:grid;
      grid-template-columns:1.08fr .92fr;
      gap:.9rem;
    }
    .news-list{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:rgba(255,255,255,.03);
      padding:.8rem;
    }
    .news-list a{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:1rem;
      padding:.85rem .75rem;
      border-radius:var(--radius-sm);
      border:1px solid transparent;
    }
    .news-list a:hover{
      background:rgba(255,255,255,.04);
      border-color:var(--line);
    }
    .news-list .title{
      display:block;
      font-weight:700;
      margin-bottom:.25rem;
      line-height:1.4;
      color:#fff;
    }
    .news-list .desc{
      display:block;
      color:var(--muted);
      font-size:.85rem;
      line-height:1.55;
    }
    .news-list .time{
      color:var(--gold);
      font-size:.8rem;
      white-space:nowrap;
      padding-top:.1rem;
    }
    .news-feature{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:
        linear-gradient(180deg, rgba(225,29,72,.12), rgba(255,255,255,.02)),
        rgba(255,255,255,.03);
      padding:1rem;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      min-height:100%;
    }
    .news-feature h3{
      margin:0 0 .55rem;
      font-size:1.15rem;
    }
    .news-feature p{
      margin:0;
      color:var(--muted);
      line-height:1.75;
      font-size:.94rem;
    }
    .news-feature .mini-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:.75rem;
      margin-top:1rem;
    }
    .mini-stat{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:rgba(7,7,8,.55);
      padding:.8rem;
    }
    .mini-stat strong{
      display:block;
      font-size:1.14rem;
      margin-bottom:.2rem;
    }
    .mini-stat span{
      color:var(--muted);
      font-size:.82rem;
      line-height:1.45;
    }
    .filter-area{
      display:grid;
      grid-template-columns:1fr 300px;
      gap:.9rem;
    }
    .filter-panel{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:rgba(255,255,255,.03);
      padding:.95rem;
    }
    .filter-row{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
      margin-bottom:.9rem;
    }
    .filter-chip{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding:.4rem .7rem;
      border-radius:999px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.04);
      color:#f3e7e3;
      font-size:.82rem;
      font-weight:700;
      white-space:nowrap;
    }
    .filter-chip.active{
      background:rgba(225,29,72,.16);
      border-color:rgba(225,29,72,.32);
      color:#ffe1e8;
    }
    .result-list{
      display:grid;
      gap:.75rem;
    }
    .result-card{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:rgba(255,255,255,.03);
      padding:.9rem;
      display:grid;
      grid-template-columns:1fr auto;
      gap:1rem;
      align-items:center;
    }
    .result-card h3{
      margin:0 0 .35rem;
      font-size:1.02rem;
    }
    .result-card p{
      margin:0;
      color:var(--muted);
      line-height:1.6;
      font-size:.88rem;
    }
    .result-meta{
      display:flex;
      flex-direction:column;
      align-items:flex-end;
      gap:.45rem;
      min-width:110px;
    }
    .result-meta .badge{
      background:rgba(240,194,91,.16) !important;
      color:#ffe7ac !important;
      border:1px solid rgba(240,194,91,.22);
      border-radius:999px;
      padding:.35rem .55rem;
      font-weight:700;
    }
    .result-meta small{
      color:var(--muted);
      text-align:right;
      line-height:1.45;
    }
    .side-note{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:linear-gradient(180deg, rgba(240,194,91,.08), rgba(255,255,255,.02));
      padding:1rem;
      display:flex;
      flex-direction:column;
      gap:.8rem;
    }
    .side-note h3{
      margin:0;
      font-size:1.02rem;
    }
    .side-note p{
      margin:0;
      color:var(--muted);
      line-height:1.7;
      font-size:.9rem;
    }
    .side-note .tip{
      display:flex;
      align-items:center;
      gap:.55rem;
      padding:.7rem .75rem;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:rgba(255,255,255,.03);
      color:#f7ece8;
      font-size:.88rem;
    }
    .topic-area{
      display:grid;
      gap:1rem;
    }
    .topic-banner{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:linear-gradient(135deg, rgba(225,29,72,.18), rgba(255,255,255,.03));
      padding:1rem;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
    }
    .topic-banner h3{
      margin:0 0 .35rem;
      font-size:1.08rem;
    }
    .topic-banner p{
      margin:0;
      color:var(--muted);
      line-height:1.65;
      font-size:.9rem;
      max-width:52rem;
    }
    .topic-grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:.9rem;
    }
    .topic-card{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:rgba(255,255,255,.03);
      padding:.95rem;
      min-height:170px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }
    .topic-card .mini{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:.75rem;
      margin-bottom:.75rem;
      color:var(--gold);
      font-weight:800;
      font-size:.8rem;
      letter-spacing:0;
    }
    .topic-card h3{
      margin:0 0 .35rem;
      font-size:1rem;
    }
    .topic-card p{
      margin:0;
      color:var(--muted);
      line-height:1.65;
      font-size:.88rem;
    }
    .topic-compare{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:.9rem;
    }
    .topic-compare .cell{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:rgba(255,255,255,.03);
      padding:1rem;
      min-height:144px;
    }
    .topic-compare .cell strong{
      display:block;
      margin-bottom:.4rem;
      font-size:1rem;
    }
    .topic-compare .cell span{
      display:block;
      color:var(--muted);
      line-height:1.65;
      font-size:.9rem;
    }
    .accordion{
      --bs-accordion-border-color: var(--line);
      --bs-accordion-btn-color: var(--text);
      --bs-accordion-btn-bg: rgba(255,255,255,.03);
      --bs-accordion-active-bg: rgba(225,29,72,.08);
      --bs-accordion-active-color: var(--text);
      --bs-accordion-bg: rgba(255,255,255,.03);
      --bs-accordion-btn-focus-border-color: rgba(225,29,72,.65);
      --bs-accordion-btn-focus-box-shadow: 0 0 0 .18rem rgba(225,29,72,.18);
    }
    .accordion-item{
      border-radius:var(--radius) !important;
      overflow:hidden;
      background:rgba(255,255,255,.03);
      border:1px solid var(--line);
      margin-bottom:.75rem;
    }
    .accordion-button{
      color:var(--text);
      font-weight:700;
      line-height:1.5;
      padding:1rem 1.05rem;
    }
    .accordion-button:not(.collapsed){
      background:rgba(225,29,72,.08);
      color:var(--text);
      box-shadow:none;
    }
    .accordion-button::after{
      filter:invert(1) brightness(1.3);
    }
    .accordion-body{
      color:var(--muted);
      line-height:1.8;
      padding:0 1.05rem 1rem;
    }
    .cta{
      border:1px solid rgba(225,29,72,.24);
      border-radius:var(--radius);
      background:
        linear-gradient(135deg, rgba(225,29,72,.2), rgba(255,255,255,.03)),
        rgba(255,255,255,.03);
      padding:1.1rem;
      box-shadow:var(--shadow);
    }
    .cta-grid{
      display:grid;
      grid-template-columns:1.06fr .94fr;
      gap:1rem;
      align-items:center;
    }
    .cta h2{
      margin:0 0 .4rem;
      font-size:1.65rem;
      line-height:1.15;
    }
    .cta p{
      margin:0;
      color:var(--muted);
      line-height:1.75;
      font-size:.96rem;
    }
    .cta-form{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:rgba(10,8,9,.6);
      padding:1rem;
    }
    .cta-form .row{
      --bs-gutter-x:.65rem;
      --bs-gutter-y:.65rem;
    }
    .cta-form .form-control,
    .cta-form .form-select{
      background:rgba(255,255,255,.04);
      border:1px solid var(--line);
      color:var(--text);
      border-radius:var(--radius-sm);
      padding:.74rem .85rem;
    }
    .cta-form .form-control::placeholder{color:#8d7e78}
    .cta-form .hint{
      color:var(--muted);
      font-size:.84rem;
      line-height:1.5;
      margin-top:.55rem;
    }
    .footer{
      margin-top:1rem;
      padding:1rem 1.25rem 1.35rem;
      border-top:1px solid var(--line);
      background:rgba(8,7,8,.82);
    }
    .footer-inner{
      max-width:var(--container);
      margin:0 auto;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:1rem;
      flex-wrap:wrap;
    }
    .footer-brand{
      display:flex;
      flex-direction:column;
      gap:.35rem;
      max-width:26rem;
    }
    .footer-brand strong{
      font-size:1rem;
      color:#fff;
    }
    .footer-brand span,
    .footer-links a,
    .footer-copy{
      color:var(--muted);
      font-size:.88rem;
      line-height:1.6;
    }
    .footer-links{
      display:flex;
      flex-wrap:wrap;
      gap:.75rem 1rem;
      align-items:center;
    }
    .footer-links a{
      padding:.3rem 0;
    }
    .footer-links a:hover{color:#fff}
    .footer-copy{
      text-align:right;
      max-width:20rem;
    }
    .section-anchor{scroll-margin-top:90px}
    .mobile-offcanvas{
      background:linear-gradient(180deg, rgba(17,13,14,.98), rgba(12,9,10,.98));
      color:var(--text);
      border-right:1px solid var(--line);
      width:320px;
    }
    .mobile-offcanvas .offcanvas-header{
      border-bottom:1px solid var(--line);
    }
    .mobile-offcanvas .btn-close{
      filter:invert(1) brightness(1.5);
      opacity:.9;
    }
    .mobile-offcanvas .sidebar-nav .nav-link{
      padding:.95rem 1rem;
    }
    @media (max-width: 1199.98px){
      .hero-grid,
      .news-wrap,
      .filter-area,
      .cta-grid{
        grid-template-columns:1fr;
      }
      .hero-panel{min-height:auto}
      .hero-visual{min-height:380px}
      .spot-grid,
      .tier-grid,
      .compare-grid,
      .assurance,
      .topic-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
      }
      .topic-compare{
        grid-template-columns:1fr;
      }
      .result-card{
        grid-template-columns:1fr;
      }
      .result-meta{
        align-items:flex-start;
      }
      .news-feature .mini-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
      }
    }
    @media (max-width: 991.98px){
      .sidebar{display:none}
      .content{
        margin-left:0;
        width:100%;
      }
      .mobile-topbar{display:block}
      .page-shell{
        padding:.95rem .9rem 1.5rem;
      }
      .hero{
        padding:1rem;
      }
      .hero-copy{
        padding:.7rem;
      }
    }
    @media (max-width: 767.98px){
      .hero h1{font-size:2.2rem;max-width:100%}
      .hero-stats,
      .spot-grid,
      .tier-grid,
      .compare-grid,
      .assurance,
      .topic-grid,
      .news-feature .mini-grid{
        grid-template-columns:1fr;
      }
      .hero-actions{gap:.55rem}
      .hero-actions .btn{
        width:100%;
        justify-content:center;
      }
      .hero-visual{
        min-height:auto;
      }
      .visual-frame{
        grid-template-columns:1fr;
      }
      .section-head{
        flex-direction:column;
        align-items:flex-start;
      }
      .footer-inner{
        flex-direction:column;
      }
      .footer-copy{
        text-align:left;
        max-width:none;
      }
    }
    @media (max-width: 519.98px){
      .top-alert .inner{
        padding:.55rem .85rem;
        flex-direction:column;
        align-items:flex-start;
      }
      .top-alert .meta{
        gap:.45rem;
      }
      .hero{
        border-radius:7px;
      }
      .hero-panel,.section-box,.cta,.footer{
        border-radius:7px;
      }
      .hero p,.section-head p,.news-feature p,.cta p{
        font-size:.94rem;
      }
      .strip-card{
        min-width:190px;
      }
      .news-list a{
        padding:.8rem .65rem;
      }
    }

/* roulang page: category1 */
:root{
      --bg:#0f1115;
      --bg-soft:#151922;
      --panel:#171b24;
      --panel-2:#1d2330;
      --line:rgba(255,255,255,.09);
      --line-strong:rgba(255,255,255,.16);
      --text:#f4f6fb;
      --muted:#a9b1c3;
      --muted-2:#7e8798;
      --brand:#ff315f;
      --brand-2:#d61f45;
      --brand-soft:#2a1119;
      --accent:#f5c24b;
      --accent-2:#3ee0d0;
      --good:#4ee18c;
      --shadow:0 18px 42px rgba(0,0,0,.34);
      --shadow-soft:0 10px 26px rgba(0,0,0,.22);
      --radius:8px;
      --radius-sm:6px;
      --sidebar-w:286px;
      --topbar-h:68px;
      --container-pad:24px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
      background:
        linear-gradient(180deg,rgba(255,49,95,.08),rgba(255,49,95,0) 18%),
        linear-gradient(135deg,rgba(245,194,75,.05),rgba(245,194,75,0) 22%),
        linear-gradient(180deg,#0f1115 0%,#10131a 40%,#0d1015 100%);
      color:var(--text);
      line-height:1.7;
      letter-spacing:0;
      min-height:100vh;
      overflow-x:hidden;
    }
    a{
      color:inherit;
      text-decoration:none;
      transition:color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease, opacity .18s ease;
    }
    img,svg{display:block;max-width:100%}
    button,input,select,textarea{font:inherit}
    button:focus,input:focus,select:focus,textarea:focus,a:focus{
      outline:none;
    }
    .focus-ring:focus,
    .btn:focus-visible,
    .nav-link:focus-visible,
    .form-control:focus,
    .form-select:focus,
    .accordion-button:focus{
      box-shadow:0 0 0 .18rem rgba(255,49,95,.22);
      border-color:rgba(255,49,95,.55);
    }
    .app-shell{
      position:relative;
      min-height:100vh;
      padding-left:var(--sidebar-w);
    }
    .desktop-sidebar{
      position:fixed;
      inset:0 auto 0 0;
      width:var(--sidebar-w);
      background:
        linear-gradient(180deg,rgba(255,49,95,.12),rgba(255,49,95,0) 24%),
        linear-gradient(180deg,#11151d 0%,#0e1117 100%);
      border-right:1px solid var(--line);
      padding:20px 16px 18px;
      z-index:1030;
      display:flex;
      flex-direction:column;
      gap:18px;
    }
    .brand-box{
      display:flex;
      align-items:center;
      gap:12px;
      padding:14px 12px;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));
      box-shadow:var(--shadow-soft);
    }
    .brand-mark{
      width:42px;
      height:42px;
      flex:0 0 42px;
      border-radius:10px;
      background:
        linear-gradient(135deg,rgba(255,49,95,.96),rgba(214,31,69,.92));
      display:grid;
      place-items:center;
      color:#fff;
      font-weight:800;
      letter-spacing:0;
      box-shadow:0 12px 24px rgba(214,31,69,.26);
    }
    .brand-copy strong{
      display:block;
      font-size:1rem;
      line-height:1.2;
      margin-bottom:4px;
      color:#fff;
    }
    .brand-copy span{
      display:block;
      font-size:.86rem;
      color:var(--muted);
      line-height:1.45;
    }
    .sidebar-group{
      display:flex;
      flex-direction:column;
      gap:12px;
      min-height:0;
    }
    .sidebar-label{
      display:flex;
      align-items:center;
      justify-content:space-between;
      font-size:.78rem;
      color:var(--muted-2);
      text-transform:uppercase;
      letter-spacing:.04em;
      padding:0 8px;
    }
    .sidebar-nav{
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .sidebar-nav .nav-link{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:12px 12px;
      border:1px solid var(--line);
      border-radius:var(--radius);
      color:var(--text);
      background:rgba(255,255,255,.02);
      font-weight:600;
      line-height:1.2;
    }
    .sidebar-nav .nav-link span{
      display:flex;
      align-items:center;
      min-width:0;
      flex:1 1 auto;
    }
    .sidebar-nav .nav-link i:last-child{
      color:var(--muted-2);
      font-size:.95rem;
    }
    .sidebar-nav .nav-link:hover{
      border-color:rgba(255,49,95,.35);
      background:rgba(255,49,95,.08);
      transform:translateX(2px);
    }
    .sidebar-nav .nav-link.active{
      background:linear-gradient(135deg,rgba(255,49,95,.18),rgba(214,31,69,.12));
      border-color:rgba(255,49,95,.42);
      box-shadow:0 12px 24px rgba(0,0,0,.18);
    }
    .sidebar-rail{
      margin-top:auto;
      padding:12px;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));
    }
    .rail-stat{
      display:grid;
      grid-template-columns:auto 1fr;
      gap:12px;
      align-items:center;
      padding-bottom:12px;
      border-bottom:1px solid var(--line);
      margin-bottom:12px;
    }
    .rail-ring{
      width:62px;
      height:62px;
      position:relative;
      display:grid;
      place-items:center;
    }
    .rail-ring svg{transform:rotate(-90deg)}
    .rail-ring .ring-text{
      position:absolute;
      inset:0;
      display:grid;
      place-items:center;
      font-weight:800;
      font-size:1rem;
      color:#fff;
    }
    .rail-stat strong{
      display:block;
      font-size:1rem;
      line-height:1.25;
      margin-bottom:4px;
    }
    .rail-stat span{
      color:var(--muted);
      font-size:.88rem;
      line-height:1.45;
    }
    .rail-list{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:8px;
      color:var(--muted);
      font-size:.9rem;
    }
    .rail-list li{
      display:flex;
      align-items:flex-start;
      gap:8px;
    }
    .rail-list i{
      color:var(--accent);
      margin-top:.2rem;
    }
    .rail-actions{
      display:grid;
      gap:8px;
      margin-top:12px;
    }
    .btn{
      border-radius:7px;
      padding:.78rem 1rem;
      font-weight:700;
      letter-spacing:0;
      line-height:1.2;
      transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
    }
    .btn:hover{transform:translateY(-1px)}
    .btn-primary{
      background:linear-gradient(135deg,var(--brand),var(--brand-2));
      border-color:transparent;
      box-shadow:0 12px 24px rgba(214,31,69,.24);
    }
    .btn-primary:hover,
    .btn-primary:focus{
      background:linear-gradient(135deg,#ff466d,#c81b42);
      border-color:transparent;
    }
    .btn-outline-light{
      border-color:rgba(255,255,255,.16);
      color:var(--text);
      background:rgba(255,255,255,.02);
    }
    .btn-outline-light:hover{
      background:rgba(255,255,255,.06);
      border-color:rgba(255,255,255,.28);
      color:#fff;
    }
    .btn-soft{
      background:rgba(62,224,208,.12);
      color:#cffff8;
      border:1px solid rgba(62,224,208,.22);
    }
    .btn-soft:hover{
      background:rgba(62,224,208,.18);
      color:#fff;
      border-color:rgba(62,224,208,.35);
    }
    .mobile-topbar{
      position:sticky;
      top:0;
      z-index:1040;
      height:var(--topbar-h);
      background:rgba(11,13,18,.92);
      backdrop-filter:blur(12px);
      border-bottom:1px solid var(--line);
      display:flex;
      align-items:center;
      padding:0 14px;
    }
    .mobile-topbar .brand-mini{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
      flex:1 1 auto;
    }
    .mobile-topbar .brand-mini strong{
      font-size:.98rem;
      line-height:1.1;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .mobile-topbar .brand-mini span{
      display:block;
      color:var(--muted);
      font-size:.75rem;
      line-height:1.2;
    }
    .mobile-topbar .menu-btn{
      border-radius:7px;
      width:42px;
      height:42px;
      display:grid;
      place-items:center;
      border:1px solid var(--line);
      background:rgba(255,255,255,.03);
      color:#fff;
    }
    .mobile-topbar .menu-btn:hover{
      background:rgba(255,49,95,.12);
      border-color:rgba(255,49,95,.32);
    }
    .offcanvas{
      background:#10141c;
      color:var(--text);
      border-right:1px solid var(--line);
    }
    .offcanvas .btn-close{
      filter:invert(1) grayscale(1);
      opacity:.85;
    }
    .offcanvas .offcanvas-body{
      display:flex;
      flex-direction:column;
      gap:16px;
    }
    .offcanvas .sidebar-nav .nav-link{
      background:rgba(255,255,255,.02);
    }
    .content-wrap{
      padding:18px var(--container-pad) 28px;
    }
    .page-shell{
      width:100%;
    }
    .content-inner{
      max-width:1440px;
      margin:0 auto;
    }
    .hero-strip{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:linear-gradient(90deg,rgba(255,49,95,.13),rgba(22,26,35,.78) 45%,rgba(22,26,35,.92));
      padding:12px 16px;
      margin-bottom:18px;
      box-shadow:var(--shadow-soft);
    }
    .hero-strip .strip-left{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:10px;
      min-width:0;
    }
    .strip-badge{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:.34rem .62rem;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      color:#fff;
      border:1px solid rgba(255,255,255,.1);
      font-size:.82rem;
      font-weight:700;
    }
    .strip-note{
      color:var(--muted);
      font-size:.92rem;
    }
    .hero-band{
      display:grid;
      grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);
      gap:18px;
      align-items:stretch;
      padding:18px;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:
        linear-gradient(180deg,rgba(255,49,95,.09),rgba(255,49,95,0) 25%),
        linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));
      box-shadow:var(--shadow);
      margin-bottom:18px;
    }
    .hero-copy{
      display:flex;
      flex-direction:column;
      gap:16px;
      min-width:0;
      padding:6px 4px 4px;
    }
    .hero-kicker{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:10px;
      color:var(--muted);
      font-size:.92rem;
    }
    .hero-kicker .kicker-dot{
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--accent);
      box-shadow:0 0 0 4px rgba(245,194,75,.12);
    }
    .hero-copy h1{
      margin:0;
      font-size:clamp(2rem,4.1vw,4rem);
      line-height:1.06;
      letter-spacing:0;
      font-weight:900;
      color:#fff;
      max-width:10.5ch;
    }
    .hero-copy .lead{
      margin:0;
      max-width:56ch;
      color:#dde2ee;
      font-size:1.02rem;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .hero-meta{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:10px;
      margin-top:auto;
    }
    .meta-box{
      padding:12px 12px 11px;
      border-radius:var(--radius-sm);
      border:1px solid var(--line);
      background:rgba(255,255,255,.03);
      min-width:0;
    }
    .meta-box strong{
      display:block;
      font-size:1.05rem;
      line-height:1.15;
      margin-bottom:4px;
      color:#fff;
    }
    .meta-box span{
      display:block;
      color:var(--muted);
      font-size:.86rem;
      line-height:1.35;
    }
    .hero-art{
      position:relative;
      border-radius:var(--radius);
      border:1px solid var(--line-strong);
      overflow:hidden;
      background:linear-gradient(180deg,#141820 0%,#10131a 100%);
      min-height:100%;
      box-shadow:var(--shadow-soft);
    }
    .hero-art svg{
      width:100%;
      height:100%;
      min-height:100%;
      display:block;
    }
    .hero-art-overlay{
      position:absolute;
      inset:0;
      display:grid;
      grid-template-columns:1fr;
      align-content:end;
      gap:10px;
      padding:16px;
      pointer-events:none;
    }
    .ring-card{
      width:92px;
      height:92px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:rgba(15,17,21,.82);
      border:1px solid rgba(255,255,255,.12);
      box-shadow:var(--shadow-soft);
      margin-bottom:6px;
    }
    .ring-card strong{
      font-size:1.3rem;
      line-height:1;
      display:block;
    }
    .ring-card span{
      display:block;
      font-size:.74rem;
      color:var(--muted);
      margin-top:2px;
      text-align:center;
    }
    .tier-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:8px;
      pointer-events:auto;
    }
    .tier-box{
      padding:10px 10px 9px;
      border-radius:7px;
      background:rgba(14,18,25,.86);
      border:1px solid rgba(255,255,255,.11);
    }
    .tier-box b{
      display:block;
      font-size:.92rem;
      margin-bottom:2px;
    }
    .tier-box small{
      color:var(--muted);
      line-height:1.35;
    }
    .band{
      margin-bottom:18px;
      border:1px solid var(--line);
      border-radius:var(--radius);
      overflow:hidden;
      background:rgba(255,255,255,.02);
    }
    .band-inner{
      padding:18px;
    }
    .band-title{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:14px;
      margin-bottom:14px;
    }
    .band-title h2{
      margin:0;
      font-size:1.15rem;
      line-height:1.2;
      font-weight:800;
      color:#fff;
    }
    .band-title p{
      margin:0;
      color:var(--muted);
      font-size:.92rem;
      max-width:54ch;
    }
    .scroll-strip{
      display:flex;
      gap:10px;
      overflow:auto;
      padding-bottom:4px;
      scrollbar-width:none;
    }
    .scroll-strip::-webkit-scrollbar{display:none}
    .strip-chip{
      flex:0 0 auto;
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:.72rem .9rem;
      border-radius:999px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.03);
      color:var(--text);
      font-weight:700;
      white-space:nowrap;
    }
    .strip-chip:hover{
      border-color:rgba(255,49,95,.32);
      background:rgba(255,49,95,.09);
      transform:translateY(-1px);
    }
    .strip-chip i{
      color:var(--accent);
    }
    .focus-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:12px;
    }
    .focus-card{
      padding:16px;
      border-radius:var(--radius);
      border:1px solid var(--line);
      background:
        linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
      min-height:100%;
    }
    .focus-card .icon{
      width:44px;
      height:44px;
      border-radius:10px;
      display:grid;
      place-items:center;
      background:rgba(255,49,95,.12);
      color:#fff;
      border:1px solid rgba(255,49,95,.18);
      margin-bottom:12px;
      font-size:1.15rem;
    }
    .focus-card h3{
      margin:0 0 8px;
      font-size:1.02rem;
      line-height:1.25;
      font-weight:800;
      color:#fff;
    }
    .focus-card p{
      margin:0;
      color:var(--muted);
      font-size:.92rem;
      line-height:1.6;
    }
    .focus-card .mini-row{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:12px;
    }
    .mini-tag{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:.34rem .56rem;
      border-radius:999px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.03);
      color:#dbe2ef;
      font-size:.78rem;
      font-weight:700;
    }
    .mini-tag.gold{border-color:rgba(245,194,75,.25);background:rgba(245,194,75,.08);color:#ffebac}
    .mini-tag.cyan{border-color:rgba(62,224,208,.22);background:rgba(62,224,208,.08);color:#d6fffb}
    .toolbar{
      display:grid;
      grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr)) auto;
      gap:10px;
      align-items:center;
      margin-bottom:14px;
    }
    .form-control,
    .form-select{
      background:#0f131a;
      border:1px solid var(--line);
      color:var(--text);
      border-radius:7px;
      min-height:48px;
      box-shadow:none;
    }
    .form-control::placeholder{color:var(--muted-2)}
    .form-select option{background:#0f131a;color:#fff}
    .toolbar .btn{
      min-height:48px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      white-space:nowrap;
    }
    .list-layout{
      display:grid;
      grid-template-columns:minmax(0,1.3fr) 340px;
      gap:14px;
      align-items:start;
    }
    .entry-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:12px;
    }
    .entry-item{
      padding:14px;
      border-radius:var(--radius);
      border:1px solid var(--line);
      background:
        linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
      display:grid;
      grid-template-columns:90px minmax(0,1fr);
      gap:12px;
      align-items:start;
      min-height:100%;
    }
    .entry-thumb{
      width:90px;
      aspect-ratio:9/11;
      border-radius:7px;
      border:1px solid rgba(255,255,255,.12);
      background:
        linear-gradient(135deg,rgba(255,49,95,.28),rgba(214,31,69,.06) 55%,rgba(245,194,75,.16)),
        linear-gradient(180deg,#1d222d,#10131a);
      position:relative;
      overflow:hidden;
    }
    .entry-thumb::before{
      content:"";
      position:absolute;
      inset:12px 10px auto 10px;
      height:8px;
      border-radius:999px;
      background:rgba(255,255,255,.36);
    }
    .entry-thumb::after{
      content:"";
      position:absolute;
      left:10px;
      right:10px;
      bottom:12px;
      height:18px;
      border-radius:5px;
      background:rgba(255,255,255,.12);
      box-shadow:0 -26px 0 rgba(255,255,255,.09),0 -52px 0 rgba(255,255,255,.06);
    }
    .entry-content{
      min-width:0;
    }
    .entry-content h3{
      margin:0 0 8px;
      font-size:1rem;
      line-height:1.3;
      font-weight:800;
      color:#fff;
    }
    .entry-content p{
      margin:0 0 10px;
      color:var(--muted);
      font-size:.9rem;
      line-height:1.55;
    }
    .entry-meta{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      align-items:center;
    }
    .status-pill{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:.32rem .55rem;
      border-radius:999px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.03);
      color:#e8edf6;
      font-size:.76rem;
      font-weight:700;
    }
    .status-pill.hot{
      border-color:rgba(255,49,95,.24);
      background:rgba(255,49,95,.1);
      color:#ffd7e0;
    }
    .status-pill.gold{
      border-color:rgba(245,194,75,.25);
      background:rgba(245,194,75,.08);
      color:#ffefb0;
    }
    .status-pill.cyan{
      border-color:rgba(62,224,208,.24);
      background:rgba(62,224,208,.08);
      color:#dffffb;
    }
    .side-stack{
      display:grid;
      gap:12px;
    }
    .side-panel{
      padding:16px;
      border-radius:var(--radius);
      border:1px solid var(--line);
      background:
        linear-gradient(180deg,rgba(255,49,95,.08),rgba(255,255,255,.02));
    }
    .side-panel h3{
      margin:0 0 10px;
      font-size:1rem;
      line-height:1.25;
      font-weight:800;
      color:#fff;
    }
    .side-panel p{
      margin:0 0 12px;
      color:var(--muted);
      font-size:.9rem;
      line-height:1.6;
    }
    .detail-list{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:10px;
    }
    .detail-list li{
      display:flex;
      gap:10px;
      align-items:flex-start;
      color:#dfe6f1;
      font-size:.9rem;
    }
    .detail-list i{
      color:var(--good);
      margin-top:.18rem;
    }
    .side-card{
      padding:14px;
      border-radius:var(--radius);
      border:1px solid var(--line);
      background:rgba(255,255,255,.03);
    }
    .side-card .label{
      display:block;
      color:var(--muted-2);
      font-size:.78rem;
      text-transform:uppercase;
      letter-spacing:.04em;
      margin-bottom:4px;
    }
    .side-card strong{
      display:block;
      font-size:1.05rem;
      line-height:1.2;
      margin-bottom:8px;
      color:#fff;
    }
    .side-card .progress{
      height:8px;
      background:#0e1117;
      border-radius:999px;
      overflow:hidden;
      margin-top:10px;
    }
    .side-card .progress-bar{
      background:linear-gradient(90deg,var(--brand),var(--accent));
    }
    .compare-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:12px;
    }
    .compare-panel{
      padding:16px;
      border-radius:var(--radius);
      border:1px solid var(--line);
      background:
        linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
    }
    .compare-panel h3{
      margin:0 0 10px;
      font-size:1rem;
      line-height:1.25;
      font-weight:800;
      color:#fff;
    }
    .compare-panel .row-line{
      display:grid;
      grid-template-columns:110px 1fr;
      gap:10px;
      padding:10px 0;
      border-top:1px solid var(--line);
    }
    .compare-panel .row-line:first-of-type{border-top:0;padding-top:0}
    .compare-panel .key{
      color:var(--muted-2);
      font-size:.82rem;
      text-transform:uppercase;
      letter-spacing:.04em;
    }
    .compare-panel .val{
      color:#eef2fb;
      font-size:.92rem;
    }
    .compare-panel .val .mini-tag{margin-top:4px}
    .accordion{
      --bs-accordion-bg:#121721;
      --bs-accordion-color:var(--text);
      --bs-accordion-border-color:var(--line);
      --bs-accordion-btn-bg:#121721;
      --bs-accordion-btn-color:var(--text);
      --bs-accordion-active-bg:#151b25;
      --bs-accordion-active-color:#fff;
      --bs-accordion-btn-focus-box-shadow:0 0 0 .18rem rgba(255,49,95,.22);
      --bs-accordion-btn-icon-filter:invert(1);
    }
    .accordion-item{
      border-radius:var(--radius);
      overflow:hidden;
      margin-bottom:10px;
      border:1px solid var(--line);
    }
    .accordion-button{
      border-radius:0 !important;
      font-weight:700;
      line-height:1.35;
      padding:1rem 1rem;
    }
    .accordion-body{
      color:var(--muted);
      line-height:1.75;
      padding:1rem;
      background:rgba(255,255,255,.015);
    }
    .cta-band{
      padding:20px;
      border-radius:var(--radius);
      border:1px solid rgba(255,49,95,.26);
      background:
        linear-gradient(135deg,rgba(255,49,95,.18),rgba(214,31,69,.08) 40%,rgba(245,194,75,.08));
      box-shadow:var(--shadow-soft);
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      gap:16px;
      align-items:center;
      margin-bottom:18px;
    }
    .cta-band h2{
      margin:0 0 8px;
      font-size:1.4rem;
      line-height:1.2;
      font-weight:900;
      color:#fff;
    }
    .cta-band p{
      margin:0;
      color:#f4f0f2;
      max-width:62ch;
      line-height:1.7;
    }
    .cta-actions{
      display:flex;
      flex-wrap:wrap;
      justify-content:flex-end;
      gap:10px;
    }
    .footer{
      border-top:1px solid var(--line);
      background:#0d1015;
      padding:22px 24px 28px;
    }
    .footer-inner{
      max-width:1440px;
      margin:0 auto;
      display:grid;
      grid-template-columns:minmax(0,1.2fr) auto minmax(0,.9fr);
      gap:18px;
      align-items:start;
    }
    .footer-brand strong{
      display:block;
      font-size:1.05rem;
      line-height:1.2;
      margin-bottom:8px;
      color:#fff;
    }
    .footer-brand span,
    .footer-copy{
      color:var(--muted);
      font-size:.9rem;
      line-height:1.65;
    }
    .footer-links{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      justify-content:center;
    }
    .footer-links a{
      color:#e9eef8;
      padding:.36rem .56rem;
      border-radius:7px;
      border:1px solid transparent;
      background:rgba(255,255,255,.02);
    }
    .footer-links a:hover{
      border-color:rgba(255,49,95,.25);
      background:rgba(255,49,95,.08);
    }
    .footer-copy{
      text-align:right;
    }
    .section-gap{height:1px;background:var(--line);margin:0}
    @media (max-width: 1199.98px){
      :root{--sidebar-w:0px;--container-pad:18px}
      .app-shell{padding-left:0}
      .content-wrap{padding-top:14px}
      .hero-band{grid-template-columns:1fr}
      .list-layout{grid-template-columns:1fr}
      .toolbar{grid-template-columns:repeat(2,minmax(0,1fr));}
      .toolbar .search-field{grid-column:1/-1}
      .entry-grid{grid-template-columns:1fr}
      .compare-grid{grid-template-columns:1fr}
      .footer-inner{grid-template-columns:1fr; text-align:left}
      .footer-links{justify-content:flex-start}
      .footer-copy{text-align:left}
    }
    @media (max-width: 767.98px){
      .content-wrap{padding:12px 14px 22px}
      .hero-strip{
        flex-direction:column;
        align-items:flex-start;
      }
      .hero-band{
        padding:16px;
      }
      .hero-copy h1{
        max-width:none;
        font-size:clamp(1.8rem,9vw,2.9rem);
      }
      .hero-meta{
        grid-template-columns:1fr;
      }
      .focus-grid{
        grid-template-columns:1fr;
      }
      .toolbar{
        grid-template-columns:1fr;
      }
      .cta-band{
        grid-template-columns:1fr;
      }
      .cta-actions{
        justify-content:flex-start;
      }
      .band-inner{padding:16px}
      .band-title{
        align-items:flex-start;
        flex-direction:column;
      }
    }
    @media (max-width: 575.98px){
      .entry-item{
        grid-template-columns:1fr;
      }
      .entry-thumb{
        width:100%;
        aspect-ratio:16/9;
      }
      .cta-band h2{
        font-size:1.2rem;
      }
      .accordion-button{
        font-size:.96rem;
      }
      .brand-box{
        padding:12px 10px;
      }
    }
    @media (min-width: 1200px){
      .main-area{
        padding-top:0;
      }
    }

/* roulang page: category2 */
:root{
      --bg:#0b0c0f;
      --bg-soft:#111318;
      --panel:#15181e;
      --panel-2:#1a1d24;
      --panel-3:#20242d;
      --line:rgba(255,255,255,.10);
      --line-strong:rgba(255,255,255,.18);
      --text:#f5f7fa;
      --muted:#a8afbb;
      --muted-2:#7e8797;
      --brand:#d71920;
      --brand-2:#ff4d7d;
      --gold:#f2b94d;
      --cyan:#59e0ff;
      --shadow:0 18px 48px rgba(0,0,0,.34);
      --shadow-soft:0 10px 24px rgba(0,0,0,.24);
      --radius:8px;
      --radius-sm:6px;
      --topbar:44px;
      --sidebar:286px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth;scroll-padding-top:96px}
    body{
      margin:0;
      background:
        linear-gradient(180deg, rgba(215,25,32,.08) 0%, rgba(11,12,15,0) 16%),
        linear-gradient(180deg, #0a0b0d 0%, #0d0f14 100%);
      color:var(--text);
      font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,sans-serif;
      line-height:1.7;
      letter-spacing:0;
      min-height:100vh;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    ::selection{background:rgba(255,77,125,.28);color:#fff}
    .text-muted{color:var(--muted) !important}
    .text-soft{color:var(--muted-2) !important}
    .border-soft{border-color:var(--line) !important}
    .bg-panel{background:var(--panel) !important}
    .bg-panel-2{background:var(--panel-2) !important}
    .bg-panel-3{background:var(--panel-3) !important}
    .btn,
    .form-control,
    .form-select,
    .accordion-button,
    .nav-link,
    .card{border-radius:var(--radius) !important}
    .btn{
      font-weight:700;
      padding:.82rem 1rem;
      border:1px solid transparent;
      transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease;
    }
    .btn:hover{transform:translateY(-1px)}
    .btn:focus,
    .nav-link:focus,
    .form-control:focus,
    .form-select:focus,
    .accordion-button:focus{
      box-shadow:0 0 0 .2rem rgba(89,224,255,.18) !important;
      outline:0;
    }
    .btn-primary{
      background:var(--brand);
      border-color:var(--brand);
      box-shadow:0 10px 22px rgba(215,25,32,.22);
    }
    .btn-primary:hover,
    .btn-primary:focus{
      background:#ef242c;
      border-color:#ef242c;
      box-shadow:0 12px 24px rgba(215,25,32,.28);
    }
    .btn-outline-light{
      color:var(--text);
      border-color:var(--line-strong);
      background:transparent;
    }
    .btn-outline-light:hover,
    .btn-outline-light:focus{
      background:rgba(255,255,255,.05);
      border-color:rgba(255,255,255,.22);
      color:#fff;
    }
    .btn-soft{
      color:#fff;
      background:rgba(255,255,255,.06);
      border-color:rgba(255,255,255,.10);
    }
    .btn-soft:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.16);color:#fff}
    .badge{
      border-radius:999px;
      font-weight:700;
      letter-spacing:0;
      padding:.45rem .62rem;
    }
    .badge-brand{
      background:rgba(215,25,32,.14);
      color:#ffbcc0;
      border:1px solid rgba(215,25,32,.24);
    }
    .badge-gold{
      background:rgba(242,185,77,.14);
      color:#ffe0a0;
      border:1px solid rgba(242,185,77,.24);
    }
    .badge-cyan{
      background:rgba(89,224,255,.12);
      color:#b8f4ff;
      border:1px solid rgba(89,224,255,.22);
    }
    .top-strip{
      position:sticky;
      top:0;
      z-index:1085;
      min-height:var(--topbar);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding:.55rem 1rem;
      background:
        linear-gradient(90deg, rgba(215,25,32,.95) 0%, rgba(121,22,32,.96) 52%, rgba(18,18,22,.96) 100%);
      border-bottom:1px solid rgba(255,255,255,.08);
      box-shadow:0 8px 24px rgba(0,0,0,.18);
      backdrop-filter:saturate(1.2);
    }
    .top-strip .notice{
      display:flex;
      align-items:center;
      gap:.75rem;
      min-width:0;
      font-size:.92rem;
      font-weight:700;
      white-space:nowrap;
    }
    .top-strip .notice span{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
    }
    .top-strip .mini-tags{
      display:flex;
      gap:.5rem;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .top-strip .mini-tags .tag{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.28rem .6rem;
      border:1px solid rgba(255,255,255,.14);
      border-radius:999px;
      background:rgba(255,255,255,.07);
      color:#fff;
      font-size:.8rem;
      font-weight:700;
    }
    .mobile-header{
      position:sticky;
      top:var(--topbar);
      z-index:1075;
      background:rgba(11,12,15,.96);
      border-bottom:1px solid var(--line);
      backdrop-filter:blur(10px);
    }
    .mobile-header-inner{
      padding:.8rem 1rem;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.75rem;
    }
    .brand-mark{
      display:flex;
      flex-direction:column;
      gap:.12rem;
      min-width:0;
    }
    .brand-mark strong,
    .sidebar-brand strong,
    .footer-brand strong{
      display:block;
      font-size:1.05rem;
      line-height:1.2;
      letter-spacing:0;
      color:#fff;
      overflow-wrap:anywhere;
    }
    .brand-mark span,
    .sidebar-brand span,
    .footer-brand span{
      color:var(--muted);
      font-size:.88rem;
      line-height:1.45;
    }
    .offcanvas.topic-offcanvas{
      background:var(--bg);
      color:var(--text);
      border-right:1px solid var(--line);
      width:min(86vw, 330px);
    }
    .offcanvas-header{
      border-bottom:1px solid var(--line);
      padding:1rem 1rem .9rem;
    }
    .offcanvas-body{padding:1rem}
    .desktop-sidebar{
      position:fixed;
      top:var(--topbar);
      left:0;
      width:var(--sidebar);
      height:calc(100vh - var(--topbar));
      background:
        linear-gradient(180deg, rgba(21,24,30,.98) 0%, rgba(13,14,18,.98) 100%);
      border-right:1px solid var(--line);
      box-shadow:inset -1px 0 0 rgba(255,255,255,.03);
      z-index:1060;
      overflow-y:auto;
    }
    .sidebar-shell{
      padding:1.1rem 1rem 1.2rem;
      min-height:100%;
      display:flex;
      flex-direction:column;
      gap:1rem;
    }
    .sidebar-brand{
      padding:1rem;
      background:
        linear-gradient(135deg, rgba(215,25,32,.18) 0%, rgba(255,77,125,.08) 42%, rgba(255,255,255,.03) 100%);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow-soft);
    }
    .sidebar-brand .eyebrow,
    .hero-kicker,
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      font-size:.78rem;
      text-transform:none;
      letter-spacing:0;
      color:#ffd0d3;
      padding:.28rem .56rem;
      border:1px solid rgba(215,25,32,.26);
      background:rgba(215,25,32,.14);
      border-radius:999px;
      margin-bottom:.8rem;
      font-weight:800;
    }
    .sidebar-brand .eyebrow i,
    .hero-kicker i,
    .section-kicker i{
      color:#ffb2bb;
    }
    .sidebar-brand .brand-note{
      margin-top:.7rem;
      display:grid;
      gap:.45rem;
    }
    .sidebar-badges{
      display:flex;
      flex-wrap:wrap;
      gap:.45rem;
    }
    .sidebar-badges .badge{
      border-radius:999px;
      padding:.42rem .55rem;
      font-size:.76rem;
    }
    .sidebar-nav{
      display:grid;
      gap:.55rem;
    }
    .sidebar-nav .nav-link{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.75rem;
      padding:.88rem .9rem;
      color:var(--text);
      background:rgba(255,255,255,.02);
      border:1px solid var(--line);
      transition:transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
      font-weight:800;
    }
    .sidebar-nav .nav-link span{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      min-width:0;
    }
    .sidebar-nav .nav-link i:last-child{
      color:var(--muted);
      transition:transform .18s ease,color .18s ease;
    }
    .sidebar-nav .nav-link:hover{
      transform:translateY(-1px);
      background:rgba(255,255,255,.05);
      border-color:rgba(255,255,255,.14);
      color:#fff;
    }
    .sidebar-nav .nav-link:hover i:last-child{transform:translate(2px,-2px);color:#fff}
    .sidebar-nav .nav-link.active{
      background:linear-gradient(135deg, rgba(215,25,32,.96) 0%, rgba(255,77,125,.82) 100%);
      border-color:rgba(255,255,255,.18);
      color:#fff;
      box-shadow:0 14px 28px rgba(215,25,32,.24);
    }
    .sidebar-nav .nav-link.active i:last-child{color:#fff}
    .sidebar-quick{
      margin-top:auto;
      display:grid;
      gap:.8rem;
      padding-top:.2rem;
    }
    .quick-box{
      padding:.92rem 1rem;
      border-radius:var(--radius);
      border:1px solid var(--line);
      background:var(--panel);
      box-shadow:var(--shadow-soft);
    }
    .quick-box strong{
      display:block;
      margin-bottom:.28rem;
      font-size:.96rem;
    }
    .quick-box p{
      margin:0;
      color:var(--muted);
      font-size:.88rem;
      line-height:1.55;
    }
    .quick-links{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
    }
    .quick-links a{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.35rem;
      padding:.48rem .68rem;
      font-size:.83rem;
      font-weight:700;
      background:rgba(255,255,255,.04);
      border:1px solid var(--line);
      border-radius:999px;
      color:var(--text);
      transition:background-color .18s ease,border-color .18s ease,transform .18s ease;
    }
    .quick-links a:hover{
      background:rgba(255,255,255,.08);
      border-color:rgba(255,255,255,.16);
      transform:translateY(-1px);
    }
    .page-main{
      position:relative;
      padding:18px 16px 24px;
    }
    .content-wrap{
      max-width:1360px;
      margin:0 auto;
    }
    .hero-band,
    .section-band{
      position:relative;
      border:1px solid var(--line);
      background:rgba(255,255,255,.02);
      overflow:hidden;
    }
    .hero-band{
      padding:1.25rem;
      background:
        linear-gradient(135deg, rgba(215,25,32,.18) 0%, rgba(255,77,125,.08) 34%, rgba(15,16,20,.96) 74%, rgba(11,12,15,1) 100%);
      box-shadow:var(--shadow);
    }
    .hero-band::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(115deg, rgba(255,255,255,.05) 0 1px, transparent 1px 19px),
        linear-gradient(25deg, rgba(255,255,255,.03) 0 1px, transparent 1px 18px);
      opacity:.4;
      pointer-events:none;
      mask-image:linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.18));
    }
    .hero-grid{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);
      gap:1.2rem;
      align-items:stretch;
    }
    .hero-copy{
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      gap:1rem;
      padding:1.1rem .3rem .8rem;
      min-width:0;
    }
    .hero-copy h1{
      margin:0;
      font-size:3rem;
      line-height:1.12;
      font-weight:900;
      letter-spacing:0;
      max-width:12ch;
      overflow-wrap:anywhere;
    }
    .hero-copy .lead{
      margin:0;
      max-width:58ch;
      color:#e8ebf1;
      font-size:1.05rem;
      line-height:1.8;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.72rem;
      align-items:center;
    }
    .hero-tags{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
    }
    .hero-tags .tag{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.45rem .68rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.05);
      color:#fff;
      font-size:.84rem;
      font-weight:700;
    }
    .hero-panel{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:.8rem;
      align-content:stretch;
    }
    .matrix-card{
      min-height:138px;
      padding:1rem;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      border-radius:var(--radius);
      border:1px solid var(--line);
      background:linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 100%);
      box-shadow:var(--shadow-soft);
      transition:transform .18s ease,border-color .18s ease,background-color .18s ease;
    }
    .matrix-card:hover{
      transform:translateY(-2px);
      border-color:rgba(255,255,255,.18);
      background:rgba(255,255,255,.06);
    }
    .matrix-card .cap{
      display:flex;
      align-items:center;
      gap:.45rem;
      color:#d8dde5;
      font-size:.83rem;
      font-weight:800;
    }
    .matrix-card .value{
      display:block;
      margin:.25rem 0 .35rem;
      font-size:1.35rem;
      line-height:1.15;
      font-weight:900;
      color:#fff;
    }
    .matrix-card p{
      margin:0;
      color:var(--muted);
      font-size:.87rem;
      line-height:1.55;
    }
    .matrix-card.red{
      background:linear-gradient(180deg, rgba(215,25,32,.18) 0%, rgba(255,255,255,.02) 100%);
    }
    .matrix-card.gold{
      background:linear-gradient(180deg, rgba(242,185,77,.14) 0%, rgba(255,255,255,.02) 100%);
    }
    .matrix-card.cyan{
      background:linear-gradient(180deg, rgba(89,224,255,.14) 0%, rgba(255,255,255,.02) 100%);
    }
    .matrix-card.dark{
      background:linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(32,36,45,.78) 100%);
    }
    .hero-foot{
      position:relative;
      z-index:1;
      margin-top:1rem;
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:.8rem;
    }
    .hero-foot .foot-item{
      padding:.82rem .92rem;
      border:1px solid var(--line);
      background:rgba(0,0,0,.22);
      border-radius:var(--radius);
    }
    .hero-foot .foot-item strong{
      display:block;
      font-size:.94rem;
      margin-bottom:.15rem;
    }
    .hero-foot .foot-item span{
      color:var(--muted);
      font-size:.86rem;
    }
    .section-band{
      margin-top:1rem;
      padding:1rem;
      background:rgba(255,255,255,.02);
    }
    .strip-title{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      margin-bottom:.85rem;
    }
    .strip-title h2,
    .band-head h2{
      margin:0;
      font-size:1.34rem;
      line-height:1.28;
      font-weight:900;
      letter-spacing:0;
      overflow-wrap:anywhere;
    }
    .strip-title p,
    .band-head p{
      margin:.3rem 0 0;
      color:var(--muted);
      font-size:.94rem;
      line-height:1.65;
      max-width:68ch;
    }
    .inline-track{
      display:flex;
      gap:.65rem;
      overflow-x:auto;
      padding-bottom:.25rem;
      scroll-snap-type:x proximity;
    }
    .inline-track::-webkit-scrollbar{height:8px}
    .inline-track::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:999px}
    .track-chip{
      flex:0 0 auto;
      scroll-snap-align:start;
      display:inline-flex;
      align-items:center;
      gap:.42rem;
      padding:.72rem .9rem;
      border-radius:999px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.04);
      color:var(--text);
      font-weight:800;
      white-space:nowrap;
      transition:background-color .18s ease,border-color .18s ease,transform .18s ease;
    }
    .track-chip:hover{
      background:rgba(255,255,255,.08);
      border-color:rgba(255,255,255,.16);
      transform:translateY(-1px);
    }
    .track-chip.active{
      background:rgba(215,25,32,.15);
      border-color:rgba(215,25,32,.28);
      color:#ffd4d7;
    }
    .feature-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:.85rem;
    }
    .feature-card,
    .entry-card,
    .contrast-card,
    .summary-card{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:var(--panel);
      box-shadow:var(--shadow-soft);
      transition:transform .18s ease,border-color .18s ease,background-color .18s ease;
      overflow:hidden;
    }
    .feature-card:hover,
    .entry-card:hover,
    .contrast-card:hover{
      transform:translateY(-2px);
      border-color:rgba(255,255,255,.16);
      background:rgba(255,255,255,.04);
    }
    .feature-card{
      padding:1rem;
      min-height:176px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }
    .feature-card .topline,
    .entry-card .topline{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.75rem;
      margin-bottom:.65rem;
    }
    .feature-card .icon{
      width:36px;
      height:36px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:10px;
      background:rgba(255,255,255,.06);
      color:#fff;
      border:1px solid var(--line);
      flex:0 0 auto;
    }
    .feature-card h3,
    .entry-card h3,
    .contrast-card h3{
      margin:0 0 .4rem;
      font-size:1.02rem;
      line-height:1.35;
      font-weight:900;
      overflow-wrap:anywhere;
    }
    .feature-card p,
    .entry-card p,
    .contrast-card p,
    .summary-card p{
      margin:0;
      color:var(--muted);
      font-size:.92rem;
      line-height:1.65;
    }
    .feature-card .meta,
    .entry-card .meta{
      margin-top:.85rem;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.5rem;
      color:var(--muted-2);
      font-size:.8rem;
      font-weight:700;
    }
    .entry-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:.85rem;
    }
    .entry-card{
      min-height:190px;
      padding:1rem;
      position:relative;
      background:
        linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%);
    }
    .entry-card::before{
      content:"";
      position:absolute;
      inset:0 auto auto 0;
      width:100%;
      height:3px;
      background:linear-gradient(90deg, rgba(215,25,32,1) 0%, rgba(255,77,125,1) 55%, rgba(242,185,77,1) 100%);
    }
    .entry-card .pill-row{
      display:flex;
      flex-wrap:wrap;
      gap:.4rem;
      margin-top:.8rem;
    }
    .entry-card .pill-row .badge{
      font-size:.73rem;
      padding:.36rem .5rem;
    }
    .entry-card .cta-line{
      margin-top:auto;
      padding-top:.95rem;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:.5rem;
      font-size:.84rem;
      color:var(--muted-2);
      font-weight:700;
    }
    .band-two{
      display:grid;
      grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
      gap:.9rem;
      align-items:start;
    }
    .summary-card{
      padding:1rem;
      background:linear-gradient(180deg, rgba(215,25,32,.10) 0%, rgba(255,255,255,.03) 100%);
    }
    .summary-card h3{
      margin:0 0 .55rem;
      font-size:1.04rem;
      line-height:1.3;
      font-weight:900;
    }
    .summary-list{
      margin:0;
      padding:0;
      list-style:none;
      display:grid;
      gap:.58rem;
    }
    .summary-list li{
      display:flex;
      align-items:flex-start;
      gap:.55rem;
      color:var(--text);
      font-size:.92rem;
      line-height:1.6;
    }
    .summary-list i{
      color:#ff9298;
      margin-top:.18rem;
      flex:0 0 auto;
    }
    .contrast-card{
      padding:1rem;
      background:var(--panel-2);
    }
    .compare-table-wrap{
      overflow:auto;
      border-radius:var(--radius);
      border:1px solid var(--line);
      background:rgba(255,255,255,.02);
    }
    .compare-table{
      margin:0;
      min-width:640px;
      color:var(--text);
    }
    .compare-table thead th{
      background:#1b1f27;
      color:#fff;
      border-bottom:1px solid var(--line);
      font-size:.86rem;
      font-weight:900;
      padding:.85rem .9rem;
    }
    .compare-table tbody td,
    .compare-table tbody th{
      border-color:var(--line);
      padding:.82rem .9rem;
      vertical-align:top;
      background:rgba(255,255,255,.01);
      font-size:.9rem;
      line-height:1.6;
    }
    .compare-table tbody th{
      color:#fff;
      width:18%;
      font-weight:900;
      background:rgba(255,255,255,.02);
    }
    .compare-table tbody tr:hover td,
    .compare-table tbody tr:hover th{
      background:rgba(255,255,255,.03);
    }
    .text-bullet{
      display:flex;
      align-items:flex-start;
      gap:.45rem;
      margin:.35rem 0;
      color:var(--muted);
      font-size:.92rem;
      line-height:1.55;
    }
    .text-bullet i{
      color:#ffb8bd;
      margin-top:.18rem;
      flex:0 0 auto;
    }
    .stats-band{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:.8rem;
    }
    .stat-box{
      padding:.95rem 1rem;
      border-radius:var(--radius);
      border:1px solid var(--line);
      background:linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 100%);
    }
    .stat-box strong{
      display:block;
      font-size:1rem;
      line-height:1.2;
      margin-bottom:.18rem;
      color:#fff;
    }
    .stat-box span{
      color:var(--muted);
      font-size:.86rem;
      line-height:1.5;
    }
    .accordion.topic-accordion{
      display:grid;
      gap:.75rem;
    }
    .topic-accordion .accordion-item{
      border:1px solid var(--line);
      border-radius:var(--radius);
      overflow:hidden;
      background:var(--panel);
      box-shadow:var(--shadow-soft);
    }
    .topic-accordion .accordion-button{
      background:var(--panel);
      color:var(--text);
      font-weight:900;
      padding:1rem 1rem;
      box-shadow:none;
    }
    .topic-accordion .accordion-button:not(.collapsed){
      background:rgba(255,255,255,.04);
      color:#fff;
    }
    .topic-accordion .accordion-button::after{
      filter:brightness(0) invert(1);
      opacity:.8;
    }
    .topic-accordion .accordion-body{
      color:var(--muted);
      background:rgba(255,255,255,.02);
      padding:0 1rem 1rem;
      line-height:1.75;
    }
    .cta-band{
      padding:1.15rem;
      border:1px solid rgba(215,25,32,.28);
      background:
        linear-gradient(135deg, rgba(215,25,32,.18) 0%, rgba(255,77,125,.10) 46%, rgba(17,19,24,.98) 100%);
      box-shadow:var(--shadow);
    }
    .cta-band .cta-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
    }
    .cta-copy h2{
      margin:0 0 .35rem;
      font-size:1.56rem;
      line-height:1.25;
      font-weight:900;
      overflow-wrap:anywhere;
    }
    .cta-copy p{
      margin:0;
      color:#eef1f6;
      font-size:.98rem;
      line-height:1.7;
      max-width:64ch;
    }
    .cta-actions{
      display:flex;
      gap:.65rem;
      flex-wrap:wrap;
      align-items:center;
      justify-content:flex-end;
    }
    .footer{
      margin-top:1rem;
      border-top:1px solid var(--line);
      background:#0d0f13;
    }
    .footer-inner{
      max-width:1360px;
      margin:0 auto;
      padding:1.15rem 1rem 1.3rem;
      display:grid;
      grid-template-columns:1.2fr .8fr .9fr;
      gap:1rem;
      align-items:start;
    }
    .footer-brand{
      padding-right:1rem;
    }
    .footer-brand strong{
      margin-bottom:.35rem;
    }
    .footer-brand span{
      display:block;
      max-width:44ch;
    }
    .footer-links{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem .85rem;
      align-items:flex-start;
      justify-content:flex-start;
    }
    .footer-links a{
      color:var(--muted);
      font-weight:700;
      transition:color .18s ease,transform .18s ease;
    }
    .footer-links a:hover{
      color:#fff;
      transform:translateY(-1px);
    }
    .footer-copy{
      color:var(--muted);
      font-size:.88rem;
      line-height:1.6;
      text-align:left;
    }
    .page-section{
      margin-top:1rem;
    }
    .section-head{
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:1rem;
      margin-bottom:.9rem;
    }
    .section-head h2{
      margin:0;
      font-size:1.34rem;
      line-height:1.28;
      font-weight:900;
      overflow-wrap:anywhere;
    }
    .section-head p{
      margin:.32rem 0 0;
      color:var(--muted);
      font-size:.94rem;
      line-height:1.65;
      max-width:68ch;
    }
    .section-link{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      color:#ffd0d3;
      font-weight:800;
      white-space:nowrap;
      transition:color .18s ease,transform .18s ease;
    }
    .section-link:hover{color:#fff;transform:translateY(-1px)}
    .section-link i{font-size:.9rem}
    .hero-right-note{
      margin-top:.8rem;
      display:grid;
      gap:.65rem;
    }
    .hero-right-note .note-line{
      display:flex;
      align-items:flex-start;
      gap:.5rem;
      color:#edf1f6;
      font-size:.88rem;
      line-height:1.55;
    }
    .hero-right-note .note-line i{
      color:#ffb8bd;
      margin-top:.15rem;
      flex:0 0 auto;
    }
    .sr-only-focusable:active,
    .sr-only-focusable:focus{
      position:static;
      width:auto;
      height:auto;
      margin:0;
      overflow:visible;
      clip:auto;
      white-space:normal;
    }
    @media (min-width:992px){
      .page-main{margin-left:var(--sidebar);padding:18px 18px 28px}
      .mobile-header{display:none}
    }
    @media (max-width:1199.98px){
      .hero-copy h1{font-size:2.7rem}
      .feature-grid,
      .entry-grid,
      .stats-band{grid-template-columns:repeat(2,minmax(0,1fr))}
      .band-two{grid-template-columns:1fr}
      .footer-inner{grid-template-columns:1fr 1fr}
    }
    @media (max-width:991.98px){
      .desktop-sidebar{display:none}
      .hero-grid{grid-template-columns:1fr}
      .hero-copy h1{font-size:2.45rem;max-width:100%}
      .hero-foot{grid-template-columns:1fr}
      .cta-band .cta-inner{flex-direction:column;align-items:flex-start}
      .cta-actions{justify-content:flex-start}
      .footer-inner{grid-template-columns:1fr}
      .footer-brand{padding-right:0}
    }
    @media (max-width:767.98px){
      .top-strip{
        padding:.5rem .85rem;
        gap:.55rem;
        align-items:flex-start;
        flex-direction:column;
      }
      .top-strip .notice{white-space:normal}
      .top-strip .mini-tags{justify-content:flex-start}
      .page-main{padding:14px 12px 20px}
      .hero-band{padding:1rem}
      .hero-copy{padding:.2rem 0 .5rem}
      .hero-copy h1{font-size:2.1rem}
      .hero-copy .lead{font-size:1rem}
      .hero-panel,
      .feature-grid,
      .entry-grid,
      .stats-band{grid-template-columns:1fr}
      .section-head,
      .strip-title{
        flex-direction:column;
        align-items:flex-start;
      }
      .compare-table{min-width:560px}
      .cta-copy h2{font-size:1.3rem}
      .hero-actions .btn,
      .cta-actions .btn{width:100%;justify-content:center}
      .hero-actions,
      .cta-actions{width:100%}
      .track-chip{padding:.66rem .82rem}
    }
    @media (max-width:575.98px){
      .mobile-header-inner{padding:.75rem .85rem}
      .brand-mark strong{font-size:1rem}
      .brand-mark span{font-size:.82rem}
      .hero-band::before{opacity:.28}
      .matrix-card{min-height:124px}
      .compare-table{min-width:520px}
      .footer-inner{padding:1rem .85rem 1.15rem}
      .quick-links a{width:100%;justify-content:flex-start}
    }