/* roulang page: index */
:root{
      --bg:#09090f;
      --bg-soft:#11111a;
      --bg-mid:#161622;
      --line:rgba(255,255,255,.10);
      --line-strong:rgba(255,45,141,.45);
      --text:#f4f4f7;
      --muted:#a5a7b8;
      --pink:#ff2d8d;
      --rose:#ff4d6d;
      --violet:#a855f7;
      --cyan:#22d3ee;
      --lime:#b8ff3d;
      --shadow:0 14px 36px rgba(0,0,0,.35);
      --shadow-strong:0 20px 56px rgba(0,0,0,.48);
      --r:8px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      background:
        linear-gradient(180deg, rgba(255,255,255,.03), transparent 18%),
        linear-gradient(90deg, rgba(255,45,141,.06), transparent 28%, transparent 72%, rgba(34,211,238,.05));
      background-color:var(--bg);
      background-attachment:fixed;
      font-family:-apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height:1.65;
      letter-spacing:0;
      text-rendering:optimizeLegibility;
    }
    ::selection{background:rgba(255,45,141,.35);color:#fff}
    img{max-width:100%;display:block}
    a{color:inherit;text-decoration:none}
    button,input,select,textarea{
      font:inherit;
      color:inherit;
    }
    button{cursor:pointer}
    .container{
      width:min(1200px, calc(100% - 1.5rem));
      margin-inline:auto;
    }
    .band{
      position:relative;
      border-top:1px solid var(--line);
      border-bottom:1px solid rgba(255,255,255,.06);
      background:
        linear-gradient(180deg, rgba(17,17,26,.96), rgba(9,9,15,.98));
    }
    .band::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
      background-size:28px 28px;
      mask-image:linear-gradient(180deg, rgba(0,0,0,.50), rgba(0,0,0,.10) 70%, transparent);
      opacity:.25;
    }
    .panel{
      background:linear-gradient(180deg, rgba(22,22,34,.96), rgba(17,17,26,.96));
      border:1px solid var(--line);
      border-radius:var(--r);
      box-shadow:var(--shadow);
    }
    .panel-strong{
      background:linear-gradient(180deg, rgba(22,22,34,.98), rgba(12,12,19,.98));
      border:1px solid rgba(255,45,141,.28);
      border-radius:var(--r);
      box-shadow:var(--shadow-strong);
    }
    .panel-soft{
      background:rgba(255,255,255,.02);
      border:1px solid var(--line);
      border-radius:var(--r);
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      min-height:1.9rem;
      padding:.22rem .65rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.11);
      background:rgba(255,255,255,.04);
      color:#fff;
      font-size:.78rem;
      line-height:1;
      white-space:nowrap;
    }
    .chip.hot{
      border-color:rgba(184,255,61,.30);
      background:rgba(184,255,61,.08);
      color:#eaffb6;
    }
    .chip.neon{
      border-color:rgba(255,45,141,.36);
      background:rgba(255,45,141,.12);
      color:#ffd0e6;
      box-shadow:0 0 0 1px rgba(255,45,141,.06) inset;
    }
    .chip.cyan{
      border-color:rgba(34,211,238,.34);
      background:rgba(34,211,238,.10);
      color:#cdf8ff;
    }
    .btn-primary,
    .btn-secondary{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.45rem;
      min-height:2.7rem;
      padding:.72rem 1rem;
      border-radius:var(--r);
      border:1px solid transparent;
      transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
      will-change:transform;
      white-space:nowrap;
    }
    .btn-primary{
      background:linear-gradient(90deg, var(--pink), var(--rose));
      color:white;
      box-shadow:0 12px 26px rgba(255,45,141,.24);
    }
    .btn-primary:hover{
      transform:translateY(-1px);
      box-shadow:0 16px 30px rgba(255,45,141,.32);
    }
    .btn-secondary{
      background:rgba(255,255,255,.03);
      color:#f6f7fb;
      border-color:rgba(255,255,255,.13);
    }
    .btn-secondary:hover{
      transform:translateY(-1px);
      border-color:rgba(255,45,141,.44);
      background:rgba(255,45,141,.08);
      box-shadow:0 10px 22px rgba(0,0,0,.25);
    }
    .nav-link{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      min-height:2.25rem;
      padding:.42rem .72rem;
      border-radius:var(--r);
      border:1px solid transparent;
      color:#d9dbe6;
      transition:background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
    }
    .nav-link:hover{
      color:#fff;
      border-color:rgba(255,255,255,.12);
      background:rgba(255,255,255,.04);
      transform:translateY(-1px);
    }
    .nav-link[aria-current="page"]{
      color:#fff;
      border-color:rgba(255,45,141,.58);
      background:rgba(255,45,141,.14);
      box-shadow:0 0 0 1px rgba(255,45,141,.14) inset, 0 0 18px rgba(255,45,141,.14);
    }
    .section-title{
      font-size:clamp(1.35rem, 1.1rem + 0.8vw, 2rem);
      line-height:1.18;
      font-weight:800;
      color:#fff;
    }
    .section-lead{
      color:var(--muted);
      font-size:.98rem;
      max-width:66ch;
    }
    .stat-tile{
      position:relative;
      padding:1rem;
      border-radius:var(--r);
      border:1px solid var(--line);
      background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
    }
    .stat-value{
      font-size:clamp(1.5rem, 1.2rem + 1vw, 2.35rem);
      font-weight:800;
      line-height:1;
      color:#fff;
    }
    .stat-label{
      margin-top:.35rem;
      font-size:.86rem;
      color:#e6e7ef;
    }
    .stat-note{
      margin-top:.42rem;
      font-size:.78rem;
      color:var(--muted);
    }
    .card{
      padding:1rem;
      border-radius:var(--r);
      border:1px solid var(--line);
      background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01));
      transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
    }
    .card:hover{
      transform:translateY(-2px);
      border-color:rgba(255,45,141,.32);
      box-shadow:0 16px 30px rgba(0,0,0,.24);
      background:linear-gradient(180deg, rgba(255,45,141,.08), rgba(255,255,255,.012));
    }
    .entry-link{
      display:flex;
      align-items:flex-start;
      gap:.8rem;
      padding:.9rem 0;
      border-bottom:1px solid rgba(255,255,255,.08);
      transition:color .18s ease, transform .18s ease;
    }
    .entry-link:hover{color:#fff;transform:translateX(2px)}
    .entry-link:last-child{border-bottom:0}
    .faq-trigger{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding:1rem 0;
      text-align:left;
      color:#fff;
      background:transparent;
      border:0;
    }
    .faq-panel{
      max-height:0;
      overflow:hidden;
      opacity:0;
      transition:max-height .32s ease, opacity .22s ease;
      color:var(--muted);
    }
    .faq-item{
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .faq-item:last-child{border-bottom:0}
    .input,
    .select,
    .textarea{
      width:100%;
      min-height:2.8rem;
      padding:.72rem .85rem;
      border-radius:var(--r);
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.03);
      color:#f7f8fc;
      outline:none;
      transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
    }
    .input:focus,
    .select:focus,
    .textarea:focus{
      border-color:rgba(34,211,238,.5);
      box-shadow:0 0 0 3px rgba(34,211,238,.14);
      background:rgba(255,255,255,.05);
    }
    .textarea{min-height:7rem;resize:vertical}
    .field-label{
      display:block;
      margin-bottom:.45rem;
      font-size:.88rem;
      color:#e9eaf2;
    }
    .tiny{
      font-size:.8rem;
      color:var(--muted);
    }
    .focus-ring:focus-visible{
      outline:2px solid rgba(34,211,238,.85);
      outline-offset:2px;
    }
    @media (max-width: 768px){
      .mobile-stack{display:block}
    }

/* roulang page: category1 */
:root {
      --bg: #08070c;
      --panel: #111019;
      --panel-2: #171421;
      --text: #f8fafc;
      --muted: #a8adbb;
      --weak: #73798a;
      --line: rgba(255,255,255,.12);
      --hot: #ff2f86;
      --hot-2: #ff5b3f;
      --violet: #b832ff;
      --cyan: #2fffd0;
      --yellow: #ffe45e;
      --green: #6dff78;
      --radius: 8px;
      --shadow: 0 16px 34px rgba(0,0,0,.32);
      --glow: 0 0 0 1px rgba(255,47,134,.55), 0 0 22px rgba(255,47,134,.24);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-height: 100vh;
      color: var(--text);
      background:
        radial-gradient(circle at 15% 8%, rgba(255,47,134,.18), transparent 28%),
        radial-gradient(circle at 85% 20%, rgba(47,255,208,.10), transparent 24%),
        linear-gradient(180deg, #09070e 0%, #0d0b13 44%, #07070b 100%);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
      line-height: 1.65;
      overflow-x: hidden;
    }

    a { color: inherit; text-decoration: none; }
    button, input, select, textarea { font: inherit; }
    button { cursor: pointer; }
    img, svg { display: block; max-width: 100%; }
    ::selection { background: rgba(255,47,134,.38); color: #fff; }

    .container {
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      border-bottom: 1px solid rgba(255,255,255,.12);
      background: rgba(7,7,11,.82);
      backdrop-filter: blur(18px);
      box-shadow: 0 10px 28px rgba(0,0,0,.28);
    }

    .nav-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 38px;
      padding: 8px 12px;
      border: 1px solid transparent;
      border-radius: var(--radius);
      color: #cbd5e1;
      font-size: 14px;
      font-weight: 700;
      transition: transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
      white-space: nowrap;
    }

    .nav-link:hover,
    .nav-link:focus-visible {
      color: #fff;
      border-color: rgba(47,255,208,.45);
      background: rgba(47,255,208,.08);
      transform: translateY(-1px);
      outline: none;
    }

    .nav-link[aria-current="page"],
    .nav-link.active {
      color: #fff;
      border-color: rgba(255,47,134,.65);
      background: linear-gradient(135deg, rgba(255,47,134,.20), rgba(184,50,255,.13));
      box-shadow: var(--glow);
    }

    .brand-mark {
      box-shadow: 0 0 24px rgba(255,47,134,.38);
    }

    .btn-primary,
    .btn-secondary,
    .btn-ghost {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 42px;
      padding: 10px 16px;
      border-radius: var(--radius);
      border: 1px solid transparent;
      font-weight: 800;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
    }

    .btn-primary {
      color: #111016;
      background: linear-gradient(135deg, var(--yellow), var(--cyan));
      box-shadow: 0 0 0 1px rgba(255,228,94,.34), 0 12px 24px rgba(47,255,208,.18);
    }

    .btn-primary:hover,
    .btn-primary:focus-visible {
      transform: translateY(-2px);
      box-shadow: 0 0 0 1px rgba(255,228,94,.58), 0 18px 32px rgba(47,255,208,.24);
      outline: none;
    }

    .btn-secondary {
      color: #fff;
      border-color: rgba(255,47,134,.55);
      background: rgba(255,47,134,.10);
    }

    .btn-secondary:hover,
    .btn-secondary:focus-visible {
      border-color: rgba(255,47,134,.9);
      background: rgba(255,47,134,.18);
      box-shadow: var(--glow);
      outline: none;
    }

    .btn-ghost {
      color: #dbeafe;
      border-color: rgba(255,255,255,.13);
      background: rgba(255,255,255,.045);
    }

    .btn-ghost:hover,
    .btn-ghost:focus-visible {
      color: #fff;
      border-color: rgba(47,255,208,.55);
      background: rgba(47,255,208,.08);
      outline: none;
    }

    .section {
      padding: 34px 0;
    }

    .section-title {
      font-size: clamp(24px, 3vw, 38px);
      line-height: 1.22;
      font-weight: 900;
      letter-spacing: 0;
    }

    .section-copy {
      max-width: 760px;
      color: var(--muted);
      font-size: 15px;
    }

    .compact-hero {
      padding: 34px 0 22px;
      border-bottom: 1px solid rgba(255,255,255,.08);
      background:
        linear-gradient(90deg, rgba(255,47,134,.10), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.035), transparent);
    }

    .signal-strip {
      display: grid;
      grid-template-columns: 1.2fr .8fr .8fr .8fr;
      gap: 10px;
      margin-top: 22px;
    }

    .signal-item {
      min-height: 76px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
      padding: 13px;
      box-shadow: var(--shadow);
    }

    .signal-item strong {
      display: block;
      font-size: 22px;
      line-height: 1.1;
    }

    .signal-item span {
      display: block;
      margin-top: 6px;
      color: var(--muted);
      font-size: 13px;
    }

    .filter-bar {
      position: relative;
      z-index: 2;
      margin-top: -1px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: var(--radius);
      background: rgba(17,16,25,.88);
      box-shadow: var(--shadow);
      padding: 14px;
    }

    .filter-pill,
    .sort-chip,
    .status-badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.055);
      color: #e5e7eb;
      font-size: 13px;
      font-weight: 800;
      line-height: 1;
      padding: 9px 11px;
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
      white-space: nowrap;
    }

    .filter-pill:hover,
    .filter-pill.active,
    .sort-chip:hover,
    .sort-chip.active {
      transform: translateY(-1px);
      border-color: rgba(47,255,208,.62);
      background: rgba(47,255,208,.10);
    }

    .status-badge.hot {
      color: #fff;
      border-color: rgba(255,47,134,.62);
      background: rgba(255,47,134,.18);
    }

    .status-badge.new {
      color: #111016;
      border-color: transparent;
      background: linear-gradient(135deg, var(--yellow), var(--cyan));
    }

    .status-badge.stable {
      color: #d7ffe5;
      border-color: rgba(109,255,120,.45);
      background: rgba(109,255,120,.10);
    }

    .promo-sticker {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1px solid rgba(255,228,94,.55);
      border-radius: var(--radius);
      background: linear-gradient(135deg, rgba(255,228,94,.20), rgba(255,47,134,.16));
      color: #fff7bd;
      padding: 8px 10px;
      font-size: 13px;
      font-weight: 900;
      box-shadow: 0 0 18px rgba(255,228,94,.14);
      transform: rotate(-1deg);
    }

    .content-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 280px;
      gap: 18px;
      align-items: start;
    }

    .card-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .result-card,
    .side-card,
    .cta-panel,
    .notice-card,
    .faq-item {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
      box-shadow: var(--shadow);
    }

    .result-card {
      position: relative;
      min-height: 210px;
      padding: 16px;
      overflow: hidden;
      transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
    }

    .result-card::before {
      content: "";
      position: absolute;
      inset: 0 0 auto 0;
      height: 3px;
      background: linear-gradient(90deg, var(--hot), var(--yellow), var(--cyan));
      opacity: .82;
    }

    .result-card:hover {
      transform: translateY(-3px);
      border-color: rgba(255,47,134,.55);
      box-shadow: 0 18px 34px rgba(0,0,0,.42), 0 0 24px rgba(255,47,134,.13);
      background: linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.04));
    }

    .card-title {
      margin-top: 8px;
      font-size: 19px;
      line-height: 1.35;
      font-weight: 900;
      color: #fff;
    }

    .card-copy {
      margin-top: 9px;
      color: var(--muted);
      font-size: 14px;
    }

    .meta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 13px;
      color: var(--weak);
      font-size: 12px;
      font-weight: 700;
    }

    .progress-line {
      height: 6px;
      margin-top: 14px;
      border-radius: 999px;
      background: rgba(255,255,255,.09);
      overflow: hidden;
    }

    .progress-line span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--hot), var(--yellow));
    }

    .side-card {
      padding: 15px;
    }

    .side-list {
      display: grid;
      gap: 10px;
      margin-top: 12px;
    }

    .side-list a,
    .quick-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 42px;
      border: 1px solid rgba(255,255,255,.10);
      border-radius: var(--radius);
      background: rgba(255,255,255,.04);
      padding: 10px 11px;
      color: #e5e7eb;
      font-size: 14px;
      transition: background .2s ease, border-color .2s ease, transform .2s ease;
    }

    .side-list a:hover,
    .quick-row:hover {
      transform: translateX(2px);
      border-color: rgba(47,255,208,.45);
      background: rgba(47,255,208,.08);
    }

    .score-panel {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    .score-box {
      border: 1px solid rgba(255,255,255,.12);
      border-radius: var(--radius);
      background: #0f0d16;
      padding: 14px;
    }

    .score-box strong {
      display: block;
      font-size: 26px;
      line-height: 1.1;
      color: #fff;
    }

    .score-box span {
      display: block;
      margin-top: 6px;
      color: var(--muted);
      font-size: 13px;
    }

    .cta-panel {
      position: relative;
      overflow: hidden;
      padding: 22px;
      background:
        linear-gradient(135deg, rgba(255,47,134,.20), rgba(47,255,208,.08)),
        #111019;
    }

    .cta-panel::after {
      content: "确认入口";
      position: absolute;
      right: 18px;
      top: 18px;
      border: 1px solid rgba(255,228,94,.55);
      border-radius: var(--radius);
      background: rgba(255,228,94,.16);
      color: #fff4ad;
      padding: 7px 9px;
      font-size: 12px;
      font-weight: 900;
    }

    .lead-form {
      display: grid;
      grid-template-columns: 1fr 1fr auto;
      gap: 10px;
      margin-top: 18px;
    }

    .field {
      width: 100%;
      min-height: 44px;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: var(--radius);
      background: rgba(0,0,0,.22);
      color: #fff;
      padding: 10px 12px;
      outline: none;
      transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }

    .field::placeholder { color: #7f8796; }
    .field:focus {
      border-color: rgba(47,255,208,.72);
      box-shadow: 0 0 0 3px rgba(47,255,208,.13);
      background: rgba(0,0,0,.34);
    }

    .notice-card {
      padding: 14px 16px;
      color: var(--muted);
      font-size: 14px;
    }

    .faq-list {
      display: grid;
      gap: 10px;
    }

    .faq-item {
      overflow: hidden;
    }

    .faq-item summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 15px 16px;
      cursor: pointer;
      color: #fff;
      font-weight: 900;
      list-style: none;
    }

    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after {
      content: "+";
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.16);
      color: var(--cyan);
      flex: 0 0 auto;
    }

    .faq-item[open] summary::after { content: "−"; }
    .faq-item p {
      margin: 0;
      padding: 0 16px 16px;
      color: var(--muted);
      font-size: 14px;
    }

    .pagination {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 20px;
    }

    .page-dot {
      min-width: 38px;
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius);
      border: 1px solid rgba(255,255,255,.13);
      background: rgba(255,255,255,.045);
      color: #e5e7eb;
      font-weight: 800;
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
    }

    .page-dot:hover,
    .page-dot.active {
      transform: translateY(-1px);
      border-color: rgba(255,47,134,.65);
      background: rgba(255,47,134,.16);
      box-shadow: var(--glow);
    }

    .mobile-menu {
      display: none;
      border-top: 1px solid rgba(255,255,255,.10);
      background: rgba(7,7,11,.96);
    }

    .mobile-menu.open { display: block; }

    @media (max-width: 1024px) {
      .signal-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .content-grid {
        grid-template-columns: 1fr;
      }

      .score-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .lead-form {
        grid-template-columns: 1fr 1fr;
      }

      .lead-form .btn-primary {
        grid-column: 1 / -1;
      }
    }

    @media (max-width: 768px) {
      .container { width: min(100% - 24px, 1180px); }
      .section { padding: 26px 0; }
      .compact-hero { padding-top: 24px; }

      .card-grid,
      .signal-strip,
      .score-panel {
        grid-template-columns: 1fr;
      }

      .filter-bar {
        overflow: hidden;
      }

      .filter-scroll {
        display: flex;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: thin;
      }

      .lead-form {
        grid-template-columns: 1fr;
      }

      .cta-panel::after {
        position: static;
        display: inline-flex;
        margin-bottom: 12px;
      }
    }

    @media (max-width: 520px) {
      .btn-primary,
      .btn-secondary,
      .btn-ghost {
        width: 100%;
      }

      .nav-link {
        width: 100%;
        justify-content: flex-start;
      }

      .result-card {
        min-height: auto;
      }

      .section-title {
        font-size: 25px;
      }
    }

/* roulang page: category2 */
:root {
      --bg: #08070d;
      --bg-2: #111018;
      --panel: #17131f;
      --panel-2: #21172b;
      --text: #f8fafc;
      --muted: #a7adbd;
      --soft: #717789;
      --line: rgba(255,255,255,.12);
      --hot: #ff2f7d;
      --hot-2: #ff4967;
      --violet: #b935ff;
      --cyan: #22f4d0;
      --yellow: #ffe74a;
      --green: #63ff84;
      --radius: 8px;
      --shadow: 0 18px 48px rgba(0,0,0,.34);
      --glow: 0 0 0 1px rgba(255,47,125,.35), 0 0 24px rgba(255,47,125,.25);
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-height: 100vh;
      background:
        linear-gradient(180deg, rgba(255,47,125,.10), transparent 240px),
        radial-gradient(circle at 12% 8%, rgba(34,244,208,.12), transparent 280px),
        radial-gradient(circle at 90% 18%, rgba(185,53,255,.16), transparent 320px),
        var(--bg);
      color: var(--text);
      font-family: Inter, PingFang SC, Hiragino Sans GB, Microsoft YaHei, system-ui, sans-serif;
      line-height: 1.65;
    }
    a { color: inherit; text-decoration: none; }
    button, input, select, textarea { font: inherit; }
    button { cursor: pointer; }
    img { max-width: 100%; display: block; }
    .container { width: min(1160px, calc(100% - 32px)); margin-inline: auto; }
    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      border-bottom: 1px solid rgba(255,255,255,.10);
      background: rgba(7,7,11,.88);
      backdrop-filter: blur(18px);
      box-shadow: 0 10px 28px rgba(0,0,0,.28);
    }
    .nav-link {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      min-height: 40px;
      padding: .55rem .8rem;
      border: 1px solid transparent;
      border-radius: var(--radius);
      color: #dbe2ef;
      transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
    }
    .nav-link:hover {
      color: #fff;
      border-color: rgba(34,244,208,.42);
      background: rgba(34,244,208,.08);
      transform: translateY(-1px);
    }
    .nav-link.active,
    .nav-link[aria-current="page"] {
      color: #fff;
      border-color: rgba(255,47,125,.68);
      background: linear-gradient(135deg, rgba(255,47,125,.18), rgba(185,53,255,.16));
      box-shadow: var(--glow);
    }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .45rem;
      min-height: 42px;
      padding: .7rem 1rem;
      border-radius: var(--radius);
      border: 1px solid transparent;
      font-weight: 800;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
      white-space: nowrap;
    }
    .btn-primary {
      color: #110710;
      background: linear-gradient(135deg, var(--yellow), #ff8d2f 48%, var(--hot));
      box-shadow: 0 10px 24px rgba(255,47,125,.25);
    }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(255,47,125,.34); }
    .btn-secondary {
      color: #fff;
      border-color: rgba(255,255,255,.16);
      background: rgba(255,255,255,.06);
    }
    .btn-secondary:hover { border-color: rgba(34,244,208,.45); background: rgba(34,244,208,.08); transform: translateY(-1px); }
    .icon-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: var(--radius);
      background: rgba(255,255,255,.06);
      color: #fff;
      transition: .2s ease;
    }
    .icon-btn:hover { border-color: rgba(255,47,125,.6); box-shadow: var(--glow); }
    .section { padding: 72px 0; }
    .section-tight { padding: 46px 0; }
    .kicker {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      padding: .32rem .62rem;
      border: 1px solid rgba(34,244,208,.34);
      border-radius: 999px;
      color: var(--cyan);
      background: rgba(34,244,208,.08);
      font-size: .82rem;
      font-weight: 800;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      width: fit-content;
      padding: .28rem .52rem;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.12);
      color: #f8fafc;
      background: rgba(255,255,255,.07);
      font-size: .78rem;
      font-weight: 800;
      line-height: 1.2;
    }
    .badge-hot { border-color: rgba(255,47,125,.58); background: rgba(255,47,125,.14); color: #ffd7e7; }
    .badge-new { border-color: rgba(34,244,208,.55); background: rgba(34,244,208,.12); color: #c8fff6; }
    .badge-pick { border-color: rgba(255,231,74,.5); background: rgba(255,231,74,.11); color: #fff5a8; }
    .card {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
      box-shadow: 0 14px 32px rgba(0,0,0,.22);
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .card:hover {
      transform: translateY(-3px);
      border-color: rgba(255,47,125,.45);
      box-shadow: 0 18px 44px rgba(0,0,0,.32), 0 0 22px rgba(255,47,125,.12);
      background: linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.045));
    }
    .hero-cover {
      position: relative;
      overflow: hidden;
      border-bottom: 1px solid rgba(255,255,255,.10);
      background:
        linear-gradient(120deg, rgba(8,7,13,.90), rgba(8,7,13,.64) 48%, rgba(255,47,125,.18)),
        url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1200" height="680" viewBox="0 0 1200 680"%3E%3Crect width="1200" height="680" fill="%23110d18"/%3E%3Cg opacity=".35"%3E%3Cpath d="M0 120h1200M0 240h1200M0 360h1200M0 480h1200M0 600h1200" stroke="%23ff2f7d" stroke-width="2"/%3E%3Cpath d="M120 0v680M300 0v680M480 0v680M660 0v680M840 0v680M1020 0v680" stroke="%2322f4d0" stroke-width="2"/%3E%3C/g%3E%3Cg fill="%23ff2f7d" opacity=".58"%3E%3Ccircle cx="938" cy="165" r="84"/%3E%3Ccircle cx="1030" cy="310" r="38"/%3E%3C/g%3E%3Cg fill="%2322f4d0" opacity=".45"%3E%3Crect x="760" y="390" width="260" height="88" rx="10"/%3E%3Crect x="820" y="510" width="180" height="42" rx="8"/%3E%3C/g%3E%3C/svg%3E');
      background-size: cover;
      background-position: center;
    }
    .count-box {
      border: 1px solid rgba(255,231,74,.45);
      border-radius: var(--radius);
      background: rgba(255,231,74,.10);
      color: #fff6ad;
      text-align: center;
      padding: .75rem .55rem;
      min-width: 76px;
    }
    .compare-grid {
      display: grid;
      grid-template-columns: 1.2fr .9fr;
      gap: 20px;
      align-items: start;
    }
    .choice-card {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 14px;
      align-items: center;
      padding: 16px;
      border-bottom: 1px solid rgba(255,255,255,.09);
    }
    .choice-card:last-child { border-bottom: 0; }
    .choice-index {
      display: inline-flex;
      width: 34px;
      height: 34px;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius);
      background: linear-gradient(135deg, var(--hot), var(--violet));
      font-weight: 900;
      color: #fff;
      box-shadow: 0 0 18px rgba(255,47,125,.28);
    }
    .tag-wall {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .tag-wall a {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      padding: .55rem .72rem;
      border-radius: var(--radius);
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.055);
      color: #e5e7eb;
      font-size: .9rem;
      transition: .2s ease;
    }
    .tag-wall a:hover { border-color: rgba(34,244,208,.48); color: #fff; transform: translateY(-1px); }
    .meter {
      height: 8px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255,255,255,.10);
    }
    .meter span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--cyan), var(--yellow), var(--hot));
    }
    .promo-sticker {
      position: absolute;
      right: 18px;
      top: 18px;
      transform: rotate(4deg);
      border: 2px solid rgba(255,231,74,.85);
      border-radius: var(--radius);
      background: #ff2f7d;
      color: #fff;
      padding: .45rem .65rem;
      font-weight: 900;
      box-shadow: 0 12px 30px rgba(255,47,125,.32);
    }
    .form-panel {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255,47,125,.42);
      border-radius: var(--radius);
      background: linear-gradient(135deg, rgba(255,47,125,.16), rgba(34,244,208,.08) 52%, rgba(255,255,255,.05));
      box-shadow: var(--shadow);
    }
    .form-panel::before {
      content: "更新提醒";
      position: absolute;
      right: 14px;
      top: 14px;
      padding: .25rem .45rem;
      border-radius: 6px;
      background: var(--yellow);
      color: #1b1012;
      font-size: .78rem;
      font-weight: 900;
    }
    .field {
      width: 100%;
      min-height: 44px;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: var(--radius);
      background: rgba(7,7,11,.66);
      color: #fff;
      padding: .72rem .85rem;
      outline: none;
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    .field:focus {
      border-color: rgba(34,244,208,.7);
      box-shadow: 0 0 0 3px rgba(34,244,208,.12);
    }
    details {
      border: 1px solid rgba(255,255,255,.12);
      border-radius: var(--radius);
      background: rgba(255,255,255,.045);
      transition: .2s ease;
    }
    details[open] { border-color: rgba(34,244,208,.35); background: rgba(34,244,208,.06); }
    summary {
      cursor: pointer;
      padding: 16px 18px;
      font-weight: 800;
      list-style: none;
    }
    summary::-webkit-details-marker { display: none; }
    details p { padding: 0 18px 18px; color: var(--muted); margin: 0; }
    .mobile-menu {
      display: none;
      border-top: 1px solid rgba(255,255,255,.10);
      background: rgba(7,7,11,.96);
    }
    .mobile-menu.open { display: block; }
    @media (max-width: 1024px) {
      .compare-grid { grid-template-columns: 1fr; }
      .section { padding: 58px 0; }
    }
    @media (max-width: 768px) {
      .container { width: min(100% - 24px, 1160px); }
      .hero-cover { background-position: 58% center; }
      .choice-card { grid-template-columns: auto 1fr; }
      .choice-card .choice-action { grid-column: 1 / -1; }
      .btn { width: 100%; white-space: normal; }
      .count-box { min-width: 64px; }
      .section { padding: 48px 0; }
    }
    @media (max-width: 520px) {
      .nav-link { width: 100%; justify-content: flex-start; }
      .promo-sticker { position: static; display: inline-flex; margin-bottom: 12px; transform: none; }
      .count-box { padding: .62rem .45rem; min-width: 58px; }
      .tag-wall a { flex: 1 1 auto; justify-content: center; }
    }

/* roulang page: category3 */
:root{
      --bg:#07070b;
      --bg-soft:#0b0b11;
      --panel:#10111a;
      --panel-2:#0d0e15;
      --line:rgba(255,255,255,.10);
      --line-strong:rgba(255,77,184,.44);
      --text:#f5f7fb;
      --muted:#9ba7bb;
      --muted-2:#728095;
      --accent:#ff4db8;
      --accent-2:#ff6b4a;
      --accent-3:#29e0c5;
      --warning:#ffcf5c;
      --success:#7cf29a;
      --shadow:0 14px 34px rgba(0,0,0,.38);
      --shadow-soft:0 8px 20px rgba(0,0,0,.24);
      --radius:8px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      background:
        linear-gradient(180deg, rgba(255,255,255,.02), transparent 12%),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(180deg, #09090f 0%, #07070b 45%, #07070b 100%);
      background-size:100% 100%, 88px 88px, 100% 100%;
      background-attachment:fixed;
      font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, sans-serif;
      line-height:1.6;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      background:
        linear-gradient(180deg, rgba(255,77,184,.08), transparent 18%),
        linear-gradient(90deg, transparent 0 48%, rgba(41,224,197,.05) 49%, transparent 50%),
        linear-gradient(180deg, transparent 0 94%, rgba(255,255,255,.08) 95%, transparent 96%);
      pointer-events:none;
      opacity:.55;
      z-index:0;
    }
    ::selection{background:rgba(255,77,184,.32); color:#fff}
    a{color:inherit; text-decoration:none}
    img{max-width:100%; display:block}
    button, input, select, textarea{font:inherit}
    .container{
      width:min(1200px, calc(100% - 32px));
      margin:0 auto;
      position:relative;
      z-index:1;
    }
    .panel{
      background:linear-gradient(180deg, rgba(18,19,28,.96), rgba(12,12,18,.98));
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow-soft);
    }
    .panel-strong{
      background:
        linear-gradient(180deg, rgba(22,23,35,.98), rgba(11,11,17,.98));
      border:1px solid rgba(255,77,184,.18);
      box-shadow:var(--shadow);
    }
    .nav-link{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      border-radius:var(--radius);
      border:1px solid transparent;
      padding:.55rem .85rem;
      font-size:.95rem;
      font-weight:600;
      color:#c7d0df;
      transition:transform .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
      white-space:nowrap;
    }
    .nav-link:hover{
      color:#fff;
      border-color:rgba(255,255,255,.10);
      background:rgba(255,255,255,.04);
      transform:translateY(-1px);
    }
    .nav-link[aria-current="page"]{
      color:#fff;
      border-color:rgba(255,77,184,.55);
      background:linear-gradient(180deg, rgba(255,77,184,.22), rgba(255,77,184,.10));
      box-shadow:0 0 0 1px rgba(255,77,184,.20), 0 0 18px rgba(255,77,184,.18);
    }
    .btn-primary,.btn-secondary,.btn-ghost,.icon-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.45rem;
      border-radius:var(--radius);
      border:1px solid transparent;
      font-weight:700;
      transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease, opacity .18s ease;
      cursor:pointer;
      white-space:nowrap;
    }
    .btn-primary{
      background:linear-gradient(135deg, #ff4db8, #ff6b4a);
      color:#fff;
      box-shadow:0 12px 24px rgba(255,77,184,.24);
    }
    .btn-primary:hover{transform:translateY(-1px); box-shadow:0 14px 26px rgba(255,77,184,.32)}
    .btn-secondary{
      background:rgba(255,255,255,.04);
      color:#e8edf7;
      border-color:rgba(255,255,255,.10);
    }
    .btn-secondary:hover{
      transform:translateY(-1px);
      border-color:rgba(255,77,184,.36);
      background:rgba(255,255,255,.06);
    }
    .btn-ghost{
      background:transparent;
      color:#d6deeb;
      border-color:rgba(255,255,255,.12);
    }
    .btn-ghost:hover{
      transform:translateY(-1px);
      border-color:rgba(41,224,197,.40);
      color:#fff;
      background:rgba(41,224,197,.08);
    }
    .icon-btn{
      width:2.5rem;
      height:2.5rem;
      border-color:rgba(255,255,255,.12);
      background:rgba(255,255,255,.03);
      color:#d8deea;
    }
    .icon-btn:hover{
      transform:translateY(-1px);
      border-color:rgba(255,77,184,.4);
      background:rgba(255,77,184,.10);
      color:#fff;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      border:1px solid rgba(255,255,255,.10);
      border-radius:999px;
      padding:.34rem .65rem;
      font-size:.78rem;
      line-height:1;
      color:#dbe3ef;
      background:rgba(255,255,255,.03);
    }
    .chip-soft{
      border-color:rgba(41,224,197,.24);
      color:#bff7ea;
      background:rgba(41,224,197,.06);
    }
    .chip-hot{
      border-color:rgba(255,207,92,.28);
      color:#ffe7a4;
      background:rgba(255,207,92,.08);
    }
    .chip-accent{
      border-color:rgba(255,77,184,.28);
      color:#ffb5e0;
      background:rgba(255,77,184,.08);
    }
    .field, .select{
      width:100%;
      border:1px solid rgba(255,255,255,.11);
      border-radius:var(--radius);
      background:rgba(255,255,255,.03);
      color:#f6f8fb;
      padding:.82rem .95rem;
      outline:none;
      transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
    }
    .field::placeholder{color:#7c8798}
    .field:focus, .select:focus{
      border-color:rgba(255,77,184,.55);
      box-shadow:0 0 0 3px rgba(255,77,184,.15);
      background:rgba(255,255,255,.05);
    }
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      color:#ffcf5c;
      font-size:.78rem;
      letter-spacing:.02em;
      font-weight:800;
      text-transform:uppercase;
    }
    .entry-card{
      position:relative;
      overflow:hidden;
      border-radius:var(--radius);
      border:1px solid rgba(255,255,255,.10);
      background:linear-gradient(180deg, rgba(17,18,27,.98), rgba(12,12,18,.96));
      box-shadow:var(--shadow-soft);
      transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
    }
    .entry-card:hover{
      transform:translateY(-2px);
      border-color:rgba(255,77,184,.28);
      box-shadow:0 14px 28px rgba(0,0,0,.34);
    }
    .entry-card::after{
      content:"";
      position:absolute;
      inset:0 0 auto 0;
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(255,77,184,.55), transparent);
      opacity:.7;
    }
    .entry-main{
      padding:1rem 1rem .85rem;
    }
    .entry-extra{
      padding:0 1rem 1rem;
    }
    .entry-progress{
      height:4px;
      border-radius:999px;
      background:rgba(255,255,255,.05);
      overflow:hidden;
    }
    .entry-progress > span{
      display:block;
      height:100%;
      border-radius:999px;
      background:linear-gradient(90deg, #ff4db8, #ffcf5c);
    }
    .metric{
      border-radius:var(--radius);
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.03);
      padding:.85rem .95rem;
    }
    .metric .value{
      display:block;
      font-size:1.15rem;
      font-weight:900;
      color:#fff;
      line-height:1.15;
    }
    .metric .label{
      margin-top:.15rem;
      display:block;
      color:#9ca8ba;
      font-size:.8rem;
    }
    .faq-item{
      border-radius:var(--radius);
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.03);
      overflow:hidden;
    }
    .faq-item + .faq-item{margin-top:.75rem}
    .faq-item summary{
      list-style:none;
      cursor:pointer;
      padding:1rem 1rem;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      font-weight:700;
      color:#f4f7fb;
    }
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary::after{
      content:"";
      width:.68rem;
      height:.68rem;
      border-right:2px solid #9fb1c8;
      border-bottom:2px solid #9fb1c8;
      transform:rotate(45deg);
      transition:transform .18s ease, border-color .18s ease;
      flex:0 0 auto;
      margin-top:-.2rem;
    }
    .faq-item[open] summary::after{
      transform:rotate(225deg);
      border-color:#fff;
      margin-top:.15rem;
    }
    .faq-item .faq-body{
      padding:0 1rem 1rem;
      color:#b3bfd1;
      font-size:.95rem;
    }
    .soft-rule{
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
    }
    .results.is-list{
      display:grid;
      grid-template-columns:1fr !important;
    }
    .results.is-list .entry-card{
      display:flex;
      flex-direction:row;
      align-items:stretch;
    }
    .results.is-list .entry-main{
      flex:1 1 auto;
      padding:1rem;
    }
    .results.is-list .entry-extra{
      width:min(220px, 100%);
      border-left:1px solid rgba(255,255,255,.08);
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      padding:1rem;
    }
    .results.is-list .entry-progress{margin-top:auto}
    @media (max-width: 1024px){
      .results.is-list .entry-card{
        flex-direction:column;
      }
      .results.is-list .entry-extra{
        width:100%;
        border-left:0;
        border-top:1px solid rgba(255,255,255,.08);
      }
    }
    @media (max-width: 768px){
      .container{width:min(100% - 20px, 1200px)}
      .metric .value{font-size:1.05rem}
    }
    @media (max-width: 520px){
      .nav-link{padding:.5rem .72rem; font-size:.88rem}
      .btn-primary,.btn-secondary,.btn-ghost{width:100%}
      .results.is-list .entry-card{display:block}
      .results.is-list .entry-extra{border-top:1px solid rgba(255,255,255,.08)}
    }