/* roulang page: index */
:root{
      --bg:#090b0f;
      --panel:#12161f;
      --panel-soft:#171d28;
      --primary:#00e0a4;
      --accent:#ff6b35;
      --info:#69a7ff;
      --text-main:#f5f7fb;
      --text-muted:#9aa4b2;
      --border:rgba(255,255,255,.10);
      --shadow:0 18px 42px rgba(0,0,0,.34);
      --radius:18px;
      --radius-sm:12px;
    }
    html{scroll-behavior:smooth}
    body{
      margin:0;
      background:var(--bg);
      color:var(--text-main);
      font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
      line-height:1.75;
      text-rendering:optimizeLegibility;
      -webkit-font-smoothing:antialiased;
    }
    *{box-sizing:border-box}
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,textarea,select{font:inherit}
    ::selection{background:rgba(0,224,164,.28);color:#fff}
    .container{width:min(1200px,calc(100% - 32px));margin:0 auto}
    .glass{
      background:rgba(8,10,14,.62);
      backdrop-filter:blur(18px);
      border:1px solid rgba(255,255,255,.10);
      box-shadow:0 10px 28px rgba(0,0,0,.22);
    }
    .glass-solid{
      background:rgba(13,16,22,.95);
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .section{padding:78px 0}
    .section-tight{padding:56px 0}
    .section-head{margin-bottom:24px}
    .eyebrow{
      display:inline-flex;align-items:center;gap:8px;
      color:var(--primary);font-size:13px;font-weight:700;letter-spacing:0;
      background:rgba(0,224,164,.08);border:1px solid rgba(0,224,164,.15);
      padding:7px 12px;border-radius:999px
    }
    h1{font-size:clamp(32px,5vw,54px);line-height:1.08;margin:14px 0 14px;font-weight:800;letter-spacing:0}
    h2{font-size:clamp(24px,3vw,36px);line-height:1.18;margin:0 0 10px;font-weight:800;letter-spacing:0}
    h3{font-size:clamp(18px,2vw,23px);line-height:1.25;margin:0 0 8px;font-weight:700;letter-spacing:0}
    p{margin:0}
    .muted{color:var(--text-muted)}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:10px;
      min-height:46px;padding:0 18px;border-radius:12px;border:1px solid transparent;
      transition:all .2s ease;cursor:pointer;font-weight:700
    }
    .btn-primary{background:var(--primary);color:#08110d;box-shadow:0 12px 24px rgba(0,224,164,.14)}
    .btn-primary:hover{transform:translateY(-1px);filter:brightness(1.02)}
    .btn-secondary{background:transparent;border-color:rgba(255,255,255,.14);color:var(--text-main)}
    .btn-secondary:hover{background:rgba(255,255,255,.06);border-color:rgba(105,167,255,.35);transform:translateY(-1px)}
    .btn-accent{background:var(--accent);color:#fff;box-shadow:0 12px 24px rgba(255,107,53,.14)}
    .btn-accent:hover{transform:translateY(-1px);filter:brightness(1.03)}
    .pill{
      display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;
      background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:#dbe3ef;font-size:12px
    }
    .chip{
      display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;
      font-size:12px;font-weight:700
    }
    .chip-live{background:rgba(0,224,164,.12);color:var(--primary);border:1px solid rgba(0,224,164,.20)}
    .chip-hot{background:rgba(255,107,53,.12);color:#ff9d74;border:1px solid rgba(255,107,53,.22)}
    .chip-info{background:rgba(105,167,255,.12);color:#a9c8ff;border:1px solid rgba(105,167,255,.22)}
    .card{
      background:linear-gradient(180deg,rgba(24,29,40,.92),rgba(15,19,27,.98));
      border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
      transition:transform .2s ease,border-color .2s ease,background .2s ease
    }
    .card:hover{transform:translateY(-2px);border-color:rgba(0,224,164,.25)}
    .soft-card{
      background:var(--panel-soft);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-sm)
    }
    .stat{
      padding:18px;border-radius:16px;background:linear-gradient(180deg,rgba(23,29,40,.92),rgba(15,19,27,.98));
      border:1px solid rgba(255,255,255,.08);height:100%
    }
    .stat .value{font-size:30px;font-weight:800;line-height:1.05}
    .stat .label{font-size:13px;color:#dbe3ef}
    .stat .desc{margin-top:8px;font-size:13px;color:var(--text-muted);line-height:1.45}
    .nav-link{
      position:relative;padding:10px 0;color:#dbe3ef;font-weight:600;transition:color .2s ease
    }
    .nav-link:hover,.nav-link.active{color:#fff}
    .nav-link.active::after{
      content:"";position:absolute;left:0;right:0;bottom:-10px;height:2px;border-radius:999px;background:var(--primary)
    }
    .hero{
      position:relative;overflow:hidden;
      background:
        linear-gradient(135deg,rgba(9,11,15,.92),rgba(9,11,15,.68)),
        url('/assets/images/backpic/back-1.webp') center/cover no-repeat;
      border-bottom:1px solid rgba(255,255,255,.06)
    }
    .hero::before{
      content:"";position:absolute;inset:0;
      background:
        linear-gradient(90deg,rgba(0,0,0,.20),transparent 30%,rgba(0,0,0,.18)),
        radial-gradient(circle at 18% 26%,rgba(0,224,164,.12),transparent 28%),
        radial-gradient(circle at 82% 22%,rgba(255,107,53,.11),transparent 24%);
      pointer-events:none
    }
    .grid-lines{
      position:absolute;inset:0;pointer-events:none;opacity:.14;
      background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
      background-size:42px 42px
    }
    .hero-panel{
      background:linear-gradient(180deg,rgba(18,22,31,.84),rgba(10,13,18,.94));
      border:1px solid rgba(255,255,255,.10);border-radius:24px;box-shadow:0 24px 60px rgba(0,0,0,.34)
    }
    .table-wrap{overflow-x:auto;border-radius:18px;border:1px solid rgba(255,255,255,.08)}
    table{width:100%;border-collapse:separate;border-spacing:0;min-width:980px;background:rgba(14,18,25,.96)}
    thead th{
      position:sticky;top:0;background:#111722;color:#dce6f3;font-size:13px;text-align:left;
      padding:16px 14px;border-bottom:1px solid rgba(255,255,255,.08)
    }
    tbody td{
      padding:14px 14px;border-bottom:1px solid rgba(255,255,255,.06);color:#e8eef7;font-size:14px;vertical-align:middle
    }
    tbody tr:hover{background:rgba(255,255,255,.03)}
    .footer{
      background:#06080c;border-top:1px solid rgba(255,255,255,.08)
    }
    .footer a{color:#c8d2df}
    .footer a:hover{color:#fff}
    .faq-item{
      border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(17,23,34,.96);overflow:hidden
    }
    .faq-btn{
      width:100%;text-align:left;padding:18px 18px;background:transparent;border:0;color:var(--text-main);
      display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer
    }
    .faq-answer{padding:0 18px 18px;color:var(--text-muted);display:none}
    .faq-item.open .faq-answer{display:block}
    .faq-item.open .faq-chevron{transform:rotate(180deg)}
    .faq-chevron{transition:transform .2s ease}
    .dot{width:8px;height:8px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 6px rgba(0,224,164,.12)}
    .section-banner{
      background:
        linear-gradient(90deg,rgba(8,11,16,.86),rgba(8,11,16,.52)),
        url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
      border:1px solid rgba(255,255,255,.08);border-radius:24px;overflow:hidden
    }
    .mini-badge{
      display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;
      background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);font-size:12px;color:#dbe3ef
    }
    .timeline{
      position:relative;padding-left:22px
    }
    .timeline::before{
      content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:rgba(255,255,255,.10)
    }
    .timeline-item{
      position:relative;margin-bottom:16px
    }
    .timeline-item::before{
      content:"";position:absolute;left:-20px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--primary)
    }
    .search-box{
      display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;
      background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);min-width:240px
    }
    .search-box input{
      width:100%;background:transparent;border:0;outline:none;color:var(--text-main)
    }
    .search-box input::placeholder{color:#8592a4}
    .scrollbar-hide::-webkit-scrollbar{display:none}
    .scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}
    .cover-frame{position:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
    .cover-frame::after{
      content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,rgba(0,0,0,.65));pointer-events:none
    }
    .tag-row{display:flex;flex-wrap:wrap;gap:8px}
    .table-headline{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
    .control-row{display:flex;flex-wrap:wrap;gap:10px}
    .metric-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
    .span-3{grid-column:span 3}
    .span-4{grid-column:span 4}
    .span-5{grid-column:span 5}
    .span-6{grid-column:span 6}
    .span-7{grid-column:span 7}
    .span-8{grid-column:span 8}
    .span-12{grid-column:span 12}
    .row-gap{gap:18px}
    .subtle-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent)}
    .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:24px}
    @media (max-width: 1024px){
      .footer-grid{grid-template-columns:1.5fr 1fr 1fr}
      .span-3,.span-4,.span-5,.span-6,.span-7,.span-8{grid-column:span 6}
    }
    @media (max-width: 768px){
      .section{padding:58px 0}
      .section-tight{padding:42px 0}
      .container{width:min(100% - 20px,1200px)}
      .search-box{min-width:0;width:100%}
      .footer-grid{grid-template-columns:1fr 1fr}
      .span-3,.span-4,.span-5,.span-6,.span-7,.span-8{grid-column:span 12}
    }
    @media (max-width: 520px){
      .footer-grid{grid-template-columns:1fr}
      .stat .value{font-size:26px}
      .table-headline{align-items:flex-start;flex-direction:column}
      .control-row .btn{width:100%}
    }

/* roulang page: category1 */
:root{
      --bg:#090b0f;
      --panel:#12161f;
      --panel-soft:#171d28;
      --primary:#00e0a4;
      --accent:#ff6b35;
      --info:#69a7ff;
      --text-main:#f5f7fb;
      --text-muted:#9aa4b2;
      --border:rgba(255,255,255,.10);
      --radius:18px;
      --radius-sm:14px;
      --shadow:0 18px 50px rgba(0,0,0,.34);
    }
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
      background:
        radial-gradient(circle at 20% 0%, rgba(0,224,164,.10), transparent 30%),
        radial-gradient(circle at 80% 10%, rgba(255,107,53,.10), transparent 28%),
        var(--bg);
      color:var(--text-main);
      line-height:1.75;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }
    a{color:inherit;text-decoration:none}
    img{display:block;max-width:100%;height:auto}
    .container{max-width:1200px;margin:0 auto;padding:0 20px}
    .section{padding:84px 0}
    .section-tight{padding:56px 0}
    .glass{
      background:rgba(10,13,18,.66);
      backdrop-filter:blur(18px);
      border:1px solid var(--border);
      box-shadow:0 10px 30px rgba(0,0,0,.18);
    }
    .nav-link{
      color:#d8dde7;
      transition:all .22s ease;
      position:relative;
      padding:.2rem 0;
    }
    .nav-link:hover,.nav-link.active{color:#fff}
    .nav-link.active::after{
      content:"";
      position:absolute;
      left:0;right:0;bottom:-10px;
      height:2px;border-radius:999px;
      background:linear-gradient(90deg,var(--primary),var(--info));
    }
    .btn{
      display:inline-flex;align-items:center;justify-content:center;
      gap:.5rem;
      border-radius:12px;
      padding:.9rem 1.15rem;
      font-weight:700;
      transition:all .22s ease;
      border:1px solid transparent;
      line-height:1;
      white-space:nowrap;
    }
    .btn-primary{
      background:linear-gradient(135deg,var(--primary),#88ffd7);
      color:#04110d;
      box-shadow:0 14px 28px rgba(0,224,164,.16);
    }
    .btn-primary:hover{transform:translateY(-1px);filter:saturate(1.05)}
    .btn-ghost{
      background:rgba(255,255,255,.04);
      border-color:rgba(255,255,255,.12);
      color:#eef2f8;
    }
    .btn-ghost:hover{background:rgba(255,255,255,.08);transform:translateY(-1px)}
    .chip{
      display:inline-flex;align-items:center;gap:.4rem;
      padding:.42rem .72rem;border-radius:999px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
      color:#d6dbea;font-size:.86rem;
    }
    .pill{
      display:inline-flex;align-items:center;justify-content:center;
      padding:.28rem .55rem;border-radius:999px;font-size:.78rem;
      border:1px solid transparent;
    }
    .pill-live{background:rgba(0,224,164,.16);color:#7dffd8;border-color:rgba(0,224,164,.22)}
    .pill-soon{background:rgba(105,167,255,.16);color:#b8d2ff;border-color:rgba(105,167,255,.22)}
    .pill-done{background:rgba(255,255,255,.07);color:#c9d0dc;border-color:rgba(255,255,255,.10)}
    .panel{
      background:linear-gradient(180deg,rgba(18,22,31,.96),rgba(18,22,31,.88));
      border:1px solid rgba(255,255,255,.08);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
    }
    .panel-soft{
      background:linear-gradient(180deg,rgba(23,29,40,.95),rgba(17,20,28,.92));
      border:1px solid rgba(255,255,255,.08);
      border-radius:var(--radius);
    }
    .subtle-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent)}
    .hero-grid{
      display:grid;
      grid-template-columns:1.12fr .88fr;
      gap:28px;
      align-items:stretch;
    }
    .hero-banner{
      min-height:520px;
      background:
        linear-gradient(90deg,rgba(9,11,15,.88),rgba(9,11,15,.44)),
        url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .hero-panel{
      border-radius:24px;
      overflow:hidden;
      position:relative;
    }
    .stat{
      padding:18px;
      border-radius:18px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.08);
      transition:all .22s ease;
    }
    .stat:hover{transform:translateY(-2px);border-color:rgba(0,224,164,.26);background:rgba(255,255,255,.06)}
    .table-wrap{overflow-x:auto}
    table{min-width:980px;width:100%;border-collapse:separate;border-spacing:0}
    th,td{padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left;vertical-align:middle}
    th{color:#cdd5e3;font-size:.84rem;font-weight:600;background:rgba(255,255,255,.03)}
    td{color:#eef2f8}
    .focus-card{
      position:relative;
      overflow:hidden;
      border-radius:22px;
      min-height:300px;
      background:
        linear-gradient(180deg,rgba(9,11,15,.10),rgba(9,11,15,.92)),
        url('/assets/images/coverpic/cover-4.webp') center/cover no-repeat;
    }
    .focus-card::after{
      content:"";
      position:absolute;inset:0;
      background:linear-gradient(120deg,rgba(0,224,164,.08),transparent 36%,rgba(255,107,53,.06));
      pointer-events:none;
    }
    .faq-item{border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(255,255,255,.04)}
    .footer{background:#07090d;border-top:1px solid rgba(255,255,255,.08)}
    .footer a{color:#b4bcc9;transition:color .2s ease}
    .footer a:hover{color:#fff}
    .grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
    .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
    .grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
    .grid-5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
    .list-dot li{position:relative;padding-left:1rem}
    .list-dot li::before{content:"";position:absolute;left:0;top:.78em;width:.38rem;height:.38rem;border-radius:999px;background:var(--primary)}
    .section-title{font-size:clamp(1.6rem,2vw,2.35rem);line-height:1.18;font-weight:800}
    .section-kicker{color:#7fe9d0;font-size:.84rem;letter-spacing:.06em;text-transform:uppercase}
    .banner-label{
      display:inline-flex;align-items:center;gap:.4rem;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
      padding:.45rem .7rem;border-radius:999px;
      color:#dce3ee;font-size:.86rem;
    }
    .timeline{
      position:relative;
      padding-left:18px;
    }
    .timeline::before{
      content:"";
      position:absolute;left:7px;top:6px;bottom:6px;width:1px;background:rgba(255,255,255,.10);
    }
    .timeline-item{position:relative;padding-left:18px}
    .timeline-item::before{
      content:"";
      position:absolute;left:-1px;top:.55rem;
      width:10px;height:10px;border-radius:999px;background:var(--primary);
      box-shadow:0 0 0 4px rgba(0,224,164,.12);
    }
    .scrollbar-hide::-webkit-scrollbar{display:none}
    .scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}
    @media (max-width: 1024px){
      .hero-grid{grid-template-columns:1fr}
      .grid-5,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
      .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
    }
    @media (max-width: 768px){
      .section{padding:64px 0}
      .section-tight{padding:42px 0}
      .grid-2,.grid-3,.grid-4,.grid-5{grid-template-columns:1fr}
      .hero-banner{min-height:460px}
      .container{padding:0 16px}
    }
    @media (max-width: 520px){
      .hero-banner{min-height:420px}
      .btn{width:100%}
    }

/* roulang page: category2 */
:root {
      --bg: #090b0f;
      --bg-deep: #05070a;
      --panel: #12161f;
      --panel-soft: #171d28;
      --panel-lift: #1d2432;
      --primary: #00e0a4;
      --accent: #ff6b35;
      --info: #69a7ff;
      --text-main: #f5f7fb;
      --text-muted: #9aa4b2;
      --border: rgba(255,255,255,.10);
      --border-strong: rgba(0,224,164,.28);
      --shadow: 0 24px 80px rgba(0,0,0,.42);
      --radius: 18px;
      --radius-sm: 12px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background:
        radial-gradient(circle at 12% 8%, rgba(0,224,164,.12), transparent 28%),
        radial-gradient(circle at 88% 14%, rgba(255,107,53,.10), transparent 25%),
        linear-gradient(180deg, var(--bg), var(--bg-deep) 56%, #080a0e);
      color: var(--text-main);
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;
      line-height: 1.75;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      overflow-x: hidden;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    img {
      max-width: 100%;
      display: block;
    }

    button,
    input,
    select,
    textarea {
      font: inherit;
    }

    button {
      border: 0;
      cursor: pointer;
    }

    :focus-visible {
      outline: 3px solid rgba(0,224,164,.42);
      outline-offset: 3px;
    }

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

    .site-header {
      position: fixed;
      inset: 16px 0 auto 0;
      z-index: 60;
      transition: all .28s ease;
    }

    .site-header.scrolled {
      inset-top: 0;
      background: rgba(5,7,10,.86);
      border-bottom: 1px solid var(--border);
      box-shadow: 0 16px 42px rgba(0,0,0,.28);
      backdrop-filter: blur(18px);
    }

    .nav-shell {
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(9,11,15,.62);
      backdrop-filter: blur(18px);
      border-radius: 22px;
      box-shadow: 0 18px 60px rgba(0,0,0,.28);
      transition: all .28s ease;
    }

    .site-header.scrolled .nav-shell {
      border-color: transparent;
      background: transparent;
      border-radius: 0;
      box-shadow: none;
    }

    .nav-link {
      color: rgba(245,247,251,.74);
      font-weight: 600;
      white-space: nowrap;
      transition: color .2s ease, transform .2s ease;
      position: relative;
      padding: 8px 0;
    }

    .nav-link:hover {
      color: #fff;
      transform: translateY(-1px);
    }

    .nav-link.active {
      color: var(--primary);
    }

    .nav-link.active::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--primary), var(--accent));
    }

    .mobile-panel {
      display: none;
      border-top: 1px solid var(--border);
      background: rgba(9,11,15,.94);
    }

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

    .btn-primary,
    .btn-secondary,
    .btn-ghost {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 44px;
      padding: 11px 18px;
      border-radius: 12px;
      font-weight: 800;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
      white-space: nowrap;
    }

    .btn-primary {
      background: linear-gradient(135deg, var(--primary), #55f2c9);
      color: #06100d;
      box-shadow: 0 12px 34px rgba(0,224,164,.22);
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 18px 42px rgba(0,224,164,.30);
    }

    .btn-primary:active,
    .btn-secondary:active,
    .btn-ghost:active {
      transform: translateY(0);
    }

    .btn-secondary {
      color: #fff;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.06);
    }

    .btn-secondary:hover {
      border-color: rgba(0,224,164,.42);
      background: rgba(0,224,164,.10);
    }

    .btn-ghost {
      color: var(--primary);
      background: rgba(0,224,164,.08);
      border: 1px solid rgba(0,224,164,.22);
    }

    .btn-ghost:hover {
      background: rgba(0,224,164,.14);
      border-color: rgba(0,224,164,.48);
    }

    .hero {
      position: relative;
      min-height: 720px;
      padding: 150px 0 84px;
      isolation: isolate;
      overflow: hidden;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(5,7,10,.92) 0%, rgba(5,7,10,.72) 48%, rgba(5,7,10,.88) 100%),
        url("/assets/images/backpic/back-2.webp") center/cover no-repeat;
      z-index: -2;
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
      background-size: 42px 42px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.86), transparent 88%);
      z-index: -1;
      opacity: .62;
    }

    .eyebrow,
    .badge,
    .status-badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      border-radius: 999px;
      font-weight: 700;
      line-height: 1;
      white-space: nowrap;
    }

    .eyebrow {
      padding: 9px 13px;
      color: var(--primary);
      background: rgba(0,224,164,.10);
      border: 1px solid rgba(0,224,164,.24);
      font-size: 13px;
    }

    .badge {
      padding: 7px 10px;
      color: rgba(245,247,251,.84);
      background: rgba(255,255,255,.07);
      border: 1px solid var(--border);
      font-size: 12px;
    }

    .status-badge {
      padding: 7px 10px;
      font-size: 12px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.06);
      color: rgba(245,247,251,.82);
    }

    .status-live {
      color: var(--primary);
      background: rgba(0,224,164,.10);
      border-color: rgba(0,224,164,.32);
    }

    .status-hot {
      color: #ffd1c0;
      background: rgba(255,107,53,.14);
      border-color: rgba(255,107,53,.32);
    }

    .status-done {
      color: #c4cad5;
      background: rgba(154,164,178,.10);
      border-color: rgba(154,164,178,.20);
    }

    .status-wait {
      color: #bcd6ff;
      background: rgba(105,167,255,.12);
      border-color: rgba(105,167,255,.28);
    }

    .pulse-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--primary);
      box-shadow: 0 0 0 0 rgba(0,224,164,.58);
      animation: pulse 1.55s infinite;
    }

    @keyframes pulse {
      0% { box-shadow: 0 0 0 0 rgba(0,224,164,.55); }
      70% { box-shadow: 0 0 0 10px rgba(0,224,164,0); }
      100% { box-shadow: 0 0 0 0 rgba(0,224,164,0); }
    }

    .section {
      padding: 88px 0;
    }

    .section-tight {
      padding: 64px 0;
    }

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

    .section-desc {
      color: var(--text-muted);
      font-size: 16px;
      line-height: 1.75;
      max-width: 720px;
    }

    .panel,
    .score-card,
    .metric-card,
    .rank-card,
    .faq-card,
    .comment-card {
      background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: 0 20px 60px rgba(0,0,0,.22);
    }

    .panel {
      overflow: hidden;
    }

    .score-card,
    .metric-card,
    .rank-card,
    .comment-card {
      transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
    }

    .score-card:hover,
    .metric-card:hover,
    .rank-card:hover,
    .comment-card:hover {
      transform: translateY(-2px);
      border-color: rgba(0,224,164,.28);
      background: linear-gradient(180deg, rgba(0,224,164,.065), rgba(255,255,255,.035));
      box-shadow: 0 24px 72px rgba(0,0,0,.30);
    }

    .score-card {
      padding: 18px;
    }

    .team-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 9px 0;
    }

    .score-num {
      min-width: 42px;
      height: 34px;
      border-radius: 10px;
      background: rgba(255,255,255,.08);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      color: #fff;
    }

    .score-num.win {
      background: rgba(0,224,164,.16);
      color: var(--primary);
      border: 1px solid rgba(0,224,164,.28);
    }

    .metric-card {
      padding: 18px;
      min-height: 148px;
    }

    .metric-value {
      font-size: 30px;
      line-height: 1.1;
      font-weight: 950;
      letter-spacing: 0;
    }

    .table-wrap {
      overflow-x: auto;
      border-radius: var(--radius);
      border: 1px solid var(--border);
      background: rgba(18,22,31,.72);
    }

    table {
      width: 100%;
      border-collapse: collapse;
      min-width: 860px;
    }

    th,
    td {
      padding: 16px 15px;
      text-align: left;
      border-bottom: 1px solid rgba(255,255,255,.08);
      vertical-align: middle;
    }

    th {
      color: rgba(245,247,251,.70);
      font-size: 13px;
      font-weight: 800;
      background: rgba(255,255,255,.045);
    }

    td {
      color: rgba(245,247,251,.88);
      font-size: 14px;
    }

    tr:hover td {
      background: rgba(0,224,164,.035);
    }

    .rank-line {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 14px 0;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .rank-line:last-child {
      border-bottom: 0;
    }

    .rank-index {
      width: 30px;
      height: 30px;
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,.08);
      color: var(--text-muted);
      font-weight: 900;
    }

    .rank-line:first-child .rank-index {
      color: #06100d;
      background: var(--primary);
    }

    .image-card {
      position: relative;
      overflow: hidden;
      border-radius: var(--radius);
      border: 1px solid var(--border);
      background: var(--panel);
      min-height: 100%;
    }

    .image-card img {
      width: 100%;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      filter: saturate(1.05) contrast(1.05);
    }

    .image-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 36%, rgba(5,7,10,.88));
      pointer-events: none;
    }

    .image-card-content {
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 18px;
      z-index: 2;
    }

    .progress-track {
      height: 8px;
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      overflow: hidden;
    }

    .progress-fill {
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--primary), var(--accent));
    }

    .faq-card {
      overflow: hidden;
    }

    .faq-button {
      width: 100%;
      padding: 18px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      color: #fff;
      background: rgba(255,255,255,.035);
      text-align: left;
      font-weight: 850;
    }

    .faq-button:hover {
      background: rgba(0,224,164,.07);
    }

    .faq-answer {
      display: none;
      padding: 0 20px 20px;
      color: var(--text-muted);
      font-size: 15px;
    }

    .faq-card.open .faq-answer {
      display: block;
    }

    .faq-icon {
      transition: transform .2s ease;
      color: var(--primary);
      font-weight: 900;
    }

    .faq-card.open .faq-icon {
      transform: rotate(45deg);
    }

    .form-field {
      width: 100%;
      min-height: 46px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.055);
      color: #fff;
      padding: 10px 13px;
      transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }

    .form-field::placeholder {
      color: rgba(154,164,178,.75);
    }

    .form-field:focus {
      border-color: rgba(0,224,164,.58);
      box-shadow: 0 0 0 4px rgba(0,224,164,.12);
      background: rgba(255,255,255,.075);
      outline: none;
    }

    .subtle-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
    }

    .footer {
      background: #06080c;
      color: rgba(245,247,251,.84);
      border-top: 1px solid var(--border);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.4fr repeat(4, 1fr);
      gap: 28px;
    }

    .footer a {
      color: rgba(154,164,178,.92);
      transition: color .2s ease, transform .2s ease;
    }

    .footer a:hover {
      color: var(--primary);
      transform: translateX(2px);
    }

    .scroll-shadow {
      box-shadow: inset -18px 0 24px rgba(5,7,10,.5);
    }

    @media (max-width: 1024px) {
      .hero {
        min-height: auto;
        padding: 132px 0 64px;
      }

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

    @media (max-width: 768px) {
      .site-header {
        inset: 10px 0 auto 0;
      }

      .nav-shell {
        border-radius: 18px;
      }

      .hero {
        padding: 118px 0 52px;
      }

      .section {
        padding: 58px 0;
      }

      .section-tight {
        padding: 48px 0;
      }

      .btn-primary,
      .btn-secondary,
      .btn-ghost {
        width: 100%;
      }

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

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

    @media (max-width: 520px) {
      .container {
        width: min(100% - 24px, 1180px);
      }

      .hero h1 {
        font-size: 34px;
        line-height: 1.18;
      }

      .score-card,
      .metric-card,
      .rank-card,
      .comment-card {
        border-radius: 15px;
      }

      .team-row {
        grid-template-columns: 1fr auto;
      }

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

/* roulang page: category3 */
:root{
      --bg:#090b0f;
      --panel:#12161f;
      --panel-soft:#171d28;
      --primary:#00e0a4;
      --accent:#ff6b35;
      --info:#69a7ff;
      --text-main:#f5f7fb;
      --text-muted:#9aa4b2;
      --border:rgba(255,255,255,.10);
      --border-strong:rgba(0,224,164,.36);
      --radius:18px;
      --shadow:0 18px 50px rgba(0,0,0,.35);
      --shadow-soft:0 12px 32px rgba(0,0,0,.24);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
      background:
        radial-gradient(circle at 20% 5%,rgba(0,224,164,.14),transparent 34%),
        radial-gradient(circle at 82% 10%,rgba(255,107,53,.12),transparent 30%),
        linear-gradient(180deg,#07090d 0%,#090b0f 42%,#0d1118 100%);
      color:var(--text-main);
      line-height:1.75;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    .container{width:min(1180px,calc(100% - 40px));margin:0 auto}
    .section{padding:86px 0}
    .section-tight{padding:58px 0}
    .subtle-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent)}
    .site-header{
      position:fixed;
      top:0;
      left:0;
      right:0;
      z-index:50;
      transition:background .25s ease,border-color .25s ease,box-shadow .25s ease;
      padding:14px 0;
    }
    .site-header.scrolled{
      background:rgba(9,11,15,.92);
      border-bottom:1px solid var(--border);
      box-shadow:0 18px 44px rgba(0,0,0,.32);
      backdrop-filter:blur(18px);
    }
    .nav-shell{
      min-height:68px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(12,16,23,.58);
      backdrop-filter:blur(18px);
      box-shadow:0 16px 44px rgba(0,0,0,.20);
    }
    .nav-link{
      position:relative;
      color:#cbd5e1;
      transition:color .2s ease;
      white-space:nowrap;
    }
    .nav-link:hover,.nav-link.active{color:#fff}
    .nav-link::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:-10px;
      height:2px;
      border-radius:999px;
      background:linear-gradient(90deg,var(--primary),var(--accent));
      transform:scaleX(0);
      transform-origin:center;
      transition:transform .22s ease;
    }
    .nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}
    .brand-icon{
      background:linear-gradient(135deg,rgba(0,224,164,.22),rgba(255,107,53,.18));
      border:1px solid rgba(255,255,255,.12);
      box-shadow:inset 0 0 22px rgba(0,224,164,.12);
    }
    .mobile-panel{
      display:none;
      border:1px solid var(--border);
      background:rgba(12,16,23,.96);
      backdrop-filter:blur(18px);
      box-shadow:var(--shadow);
    }
    .mobile-panel.open{display:block}
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      border-radius:14px;
      padding:12px 18px;
      font-weight:700;
      transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease,color .2s ease;
      border:1px solid transparent;
      line-height:1.2;
    }
    .btn:focus-visible,.nav-link:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,button:focus-visible{
      outline:3px solid rgba(0,224,164,.28);
      outline-offset:3px;
    }
    .btn-primary{
      background:linear-gradient(135deg,var(--primary),#7fffd6);
      color:#06100d;
      box-shadow:0 12px 30px rgba(0,224,164,.18);
    }
    .btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(0,224,164,.26)}
    .btn-secondary{
      border-color:rgba(255,255,255,.16);
      color:#e2e8f0;
      background:rgba(255,255,255,.04);
    }
    .btn-secondary:hover{transform:translateY(-2px);border-color:rgba(0,224,164,.45);background:rgba(0,224,164,.08)}
    .badge{
      display:inline-flex;
      align-items:center;
      gap:6px;
      border-radius:999px;
      padding:5px 10px;
      font-size:12px;
      font-weight:700;
      border:1px solid var(--border);
      color:#cbd5e1;
      background:rgba(255,255,255,.05);
      white-space:nowrap;
    }
    .badge-live{color:#05120f;background:var(--primary);border-color:transparent}
    .badge-hot{color:#fff;background:rgba(255,107,53,.18);border-color:rgba(255,107,53,.38)}
    .badge-info{color:#dbeafe;background:rgba(105,167,255,.14);border-color:rgba(105,167,255,.34)}
    .card{
      border:1px solid var(--border);
      background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
      border-radius:var(--radius);
      box-shadow:var(--shadow-soft);
      transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease;
    }
    .card:hover{
      transform:translateY(-2px);
      border-color:rgba(0,224,164,.32);
      background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
      box-shadow:0 18px 48px rgba(0,0,0,.32);
    }
    .hero{
      position:relative;
      min-height:720px;
      display:flex;
      align-items:center;
      overflow:hidden;
      padding:148px 0 72px;
      background-image:
        linear-gradient(90deg,rgba(9,11,15,.96) 0%,rgba(9,11,15,.84) 42%,rgba(9,11,15,.58) 100%),
        url('/assets/images/backpic/back-2.webp');
      background-size:cover;
      background-position:center;
    }
    .hero::before{
      content:"";
      position:absolute;
      inset:0;
      background-image:
        linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
      background-size:54px 54px;
      mask-image:linear-gradient(180deg,rgba(0,0,0,.82),transparent 88%);
      pointer-events:none;
    }
    .hero::after{
      content:"";
      position:absolute;
      width:360px;
      height:360px;
      right:7%;
      top:20%;
      border-radius:999px;
      background:radial-gradient(circle,rgba(0,224,164,.18),transparent 64%);
      filter:blur(4px);
      pointer-events:none;
    }
    .hero-content{position:relative;z-index:2}
    .hero-kicker{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:8px 12px;
      border-radius:999px;
      border:1px solid rgba(0,224,164,.28);
      color:#d9fff4;
      background:rgba(0,224,164,.08);
      font-size:14px;
      font-weight:700;
    }
    .pulse-dot{
      width:8px;height:8px;border-radius:999px;background:var(--primary);
      box-shadow:0 0 0 0 rgba(0,224,164,.55);
      animation:pulse 1.8s infinite;
    }
    @keyframes pulse{
      0%{box-shadow:0 0 0 0 rgba(0,224,164,.5)}
      70%{box-shadow:0 0 0 10px rgba(0,224,164,0)}
      100%{box-shadow:0 0 0 0 rgba(0,224,164,0)}
    }
    .hero h1{
      font-size:52px;
      line-height:1.12;
      letter-spacing:.2px;
      font-weight:900;
      margin:22px 0 18px;
    }
    .gradient-text{background:linear-gradient(90deg,#fff,var(--primary),#ffe0d2);-webkit-background-clip:text;background-clip:text;color:transparent}
    .hero p{font-size:17px;color:#cbd5e1;max-width:720px}
    .metric-tile{
      border-radius:16px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(18,22,31,.82);
      padding:18px;
    }
    .metric-num{font-size:28px;font-weight:900;line-height:1;color:#fff}
    .hero-board{
      border-radius:24px;
      border:1px solid rgba(255,255,255,.13);
      background:rgba(12,16,23,.78);
      backdrop-filter:blur(14px);
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .board-head{
      background:linear-gradient(90deg,rgba(0,224,164,.16),rgba(255,107,53,.10));
      border-bottom:1px solid rgba(255,255,255,.10);
    }
    .rank-row,.team-row{
      display:grid;
      grid-template-columns:44px 1.25fr .85fr .7fr .9fr;
      gap:14px;
      align-items:center;
      padding:16px 18px;
      border-bottom:1px solid rgba(255,255,255,.08);
      transition:background .2s ease;
    }
    .rank-row:hover,.team-row:hover{background:rgba(255,255,255,.045)}
    .rank-row:last-child,.team-row:last-child{border-bottom:0}
    .rank-no{
      width:32px;height:32px;border-radius:10px;
      display:flex;align-items:center;justify-content:center;
      background:rgba(255,255,255,.06);
      color:#dbeafe;
      font-weight:900;
    }
    .rank-no.top{background:linear-gradient(135deg,var(--primary),#69a7ff);color:#07110f}
    .progress{
      height:8px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      overflow:hidden;
    }
    .progress span{
      display:block;
      height:100%;
      border-radius:999px;
      background:linear-gradient(90deg,var(--primary),var(--info));
    }
    .table-wrap{
      overflow-x:auto;
      border:1px solid var(--border);
      border-radius:18px;
      background:rgba(18,22,31,.74);
      box-shadow:var(--shadow-soft);
    }
    table{width:100%;border-collapse:collapse;min-width:920px}
    th,td{padding:15px 16px;text-align:left;border-bottom:1px solid rgba(255,255,255,.08);font-size:14px;vertical-align:middle}
    th{color:#dbeafe;background:rgba(255,255,255,.055);font-weight:800;position:sticky;top:0}
    td{color:#d2d8e4}
    tr:hover td{background:rgba(255,255,255,.035)}
    tr:last-child td{border-bottom:0}
    .filter-chip{
      border:1px solid rgba(255,255,255,.12);
      color:#cbd5e1;
      background:rgba(255,255,255,.045);
      border-radius:999px;
      padding:9px 13px;
      font-size:14px;
      font-weight:700;
      transition:.2s ease;
    }
    .filter-chip:hover,.filter-chip.active{
      color:#06100d;
      background:var(--primary);
      border-color:var(--primary);
    }
    .profile-card{
      position:relative;
      overflow:hidden;
      min-height:360px;
    }
    .profile-card img{
      width:100%;
      aspect-ratio:16/9;
      object-fit:cover;
      filter:saturate(1.08) contrast(1.04);
    }
    .profile-card .overlay{
      position:absolute;inset:0;
      background:linear-gradient(180deg,transparent 25%,rgba(9,11,15,.96) 72%);
      pointer-events:none;
    }
    .profile-content{
      position:absolute;
      left:20px;
      right:20px;
      bottom:20px;
      z-index:2;
    }
    .stat-pill{
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.055);
      border-radius:14px;
      padding:12px;
    }
    .timeline{
      position:relative;
      padding-left:22px;
    }
    .timeline::before{
      content:"";
      position:absolute;
      left:6px;
      top:6px;
      bottom:6px;
      width:1px;
      background:linear-gradient(var(--primary),rgba(255,255,255,.08));
    }
    .timeline-item{
      position:relative;
      padding:0 0 22px;
    }
    .timeline-item::before{
      content:"";
      position:absolute;
      left:-21px;
      top:8px;
      width:11px;height:11px;border-radius:999px;
      background:var(--primary);
      box-shadow:0 0 0 5px rgba(0,224,164,.12);
    }
    .faq-item{
      border:1px solid var(--border);
      border-radius:16px;
      background:rgba(255,255,255,.04);
      overflow:hidden;
    }
    .faq-q{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:18px 20px;
      color:#fff;
      font-weight:800;
      text-align:left;
    }
    .faq-a{
      display:none;
      padding:0 20px 18px;
      color:var(--text-muted);
      font-size:15px;
    }
    .faq-item.open .faq-a{display:block}
    .faq-icon{transition:transform .2s ease;color:var(--primary)}
    .faq-item.open .faq-icon{transform:rotate(45deg)}
    .input{
      width:100%;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.045);
      color:#fff;
      border-radius:14px;
      padding:13px 14px;
      transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
    }
    .input::placeholder{color:#768294}
    .input:focus{
      border-color:rgba(0,224,164,.55);
      box-shadow:0 0 0 4px rgba(0,224,164,.10);
      background:rgba(255,255,255,.065);
      outline:none;
    }
    .footer{
      background:#07090d;
      border-top:1px solid rgba(255,255,255,.10);
      color:#e5e7eb;
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.5fr repeat(4,1fr);
      gap:34px;
    }
    .footer a{color:#9aa4b2;transition:color .2s ease}
    .footer a:hover{color:var(--primary)}
    @media (max-width:1024px){
      .hero{min-height:auto;padding:132px 0 64px}
      .hero h1{font-size:42px}
      .rank-row,.team-row{grid-template-columns:40px 1.2fr .8fr .7fr;min-width:720px}
      .rank-row .hide-lg,.team-row .hide-lg{display:none}
      .footer-grid{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width:768px){
      .container{width:min(100% - 28px,1180px)}
      .section{padding:58px 0}
      .section-tight{padding:44px 0}
      .nav-shell{min-height:62px}
      .hero{padding:122px 0 52px;background-position:center}
      .hero h1{font-size:35px}
      .hero p{font-size:15.5px}
      .btn{width:100%;padding:13px 16px}
      .footer-grid{grid-template-columns:1fr}
      .metric-num{font-size:24px}
    }
    @media (max-width:520px){
      .hero h1{font-size:32px}
      .hero-kicker{font-size:12px}
      .rank-row,.team-row{min-width:660px}
      th,td{padding:13px 12px}
      .profile-content{left:16px;right:16px;bottom:16px}
    }

/* roulang page: category4 */
:root {
      --bg: #090b0f;
      --panel: #12161f;
      --panel-soft: #171d28;
      --panel-strong: #0f131b;
      --primary: #00e0a4;
      --accent: #ff6b35;
      --info: #69a7ff;
      --text-main: #f5f7fb;
      --text-muted: #9aa4b2;
      --border: rgba(255,255,255,.10);
      --border-strong: rgba(0,224,164,.34);
      --shadow: 0 24px 80px rgba(0,0,0,.38);
      --radius: 18px;
      --radius-sm: 12px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;
      color: var(--text-main);
      background:
        radial-gradient(circle at 16% 8%, rgba(0,224,164,.14), transparent 30%),
        radial-gradient(circle at 88% 22%, rgba(255,107,53,.13), transparent 28%),
        linear-gradient(180deg, #080a0e 0%, #0d1016 44%, #0a0c11 100%);
      line-height: 1.75;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    button, input, select, textarea { font: inherit; }
    ::selection { background: rgba(0,224,164,.26); color: #fff; }

    .container {
      width: min(100% - 40px, 1280px);
      margin-inline: auto;
    }

    .section { padding: 88px 0; }
    .section-tight { padding: 64px 0; }

    .site-header {
      position: fixed;
      top: 16px;
      left: 0;
      right: 0;
      z-index: 60;
      pointer-events: none;
    }

    .nav-shell {
      pointer-events: auto;
      width: min(100% - 40px, 1280px);
      margin: 0 auto;
      border: 1px solid var(--border);
      border-radius: 18px;
      background: rgba(10,13,19,.66);
      backdrop-filter: blur(18px);
      box-shadow: 0 18px 50px rgba(0,0,0,.28);
      transition: background .25s ease, border-color .25s ease, transform .25s ease;
    }

    .nav-shell.is-scrolled {
      background: rgba(9,11,15,.94);
      border-color: rgba(255,255,255,.16);
    }

    .nav-link {
      position: relative;
      color: rgba(245,247,251,.78);
      transition: color .2s ease;
      white-space: nowrap;
    }

    .nav-link::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -8px;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--primary), var(--accent));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .2s ease;
    }

    .nav-link:hover,
    .nav-link.active { color: #fff; }

    .nav-link:hover::after,
    .nav-link.active::after { transform: scaleX(1); }

    .mobile-panel {
      display: none;
      border-top: 1px solid var(--border);
      padding: 14px;
    }

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

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 44px;
      padding: 12px 18px;
      border-radius: 12px;
      border: 1px solid transparent;
      font-weight: 700;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
      cursor: pointer;
    }

    .btn:focus-visible,
    .nav-link:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
      outline: 3px solid rgba(0,224,164,.32);
      outline-offset: 3px;
    }

    .btn-primary {
      background: linear-gradient(135deg, var(--primary), #7fffd7);
      color: #06100d;
      box-shadow: 0 14px 36px rgba(0,224,164,.20);
    }

    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 46px rgba(0,224,164,.28); }
    .btn-secondary {
      background: rgba(255,255,255,.05);
      border-color: var(--border);
      color: #fff;
    }

    .btn-secondary:hover { transform: translateY(-2px); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.20); }
    .btn:active { transform: translateY(0); }

    .hero {
      position: relative;
      min-height: 720px;
      padding: 154px 0 84px;
      overflow: hidden;
      background-image:
        linear-gradient(90deg, rgba(9,11,15,.96) 0%, rgba(9,11,15,.86) 44%, rgba(9,11,15,.54) 100%),
        url("/assets/images/backpic/back-2.webp");
      background-size: cover;
      background-position: center;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size: 48px 48px;
      mask-image: linear-gradient(to bottom, rgba(0,0,0,.82), transparent 88%);
      pointer-events: none;
    }

    .hero > .container { position: relative; z-index: 2; }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 12px;
      border-radius: 999px;
      border: 1px solid rgba(0,224,164,.28);
      background: rgba(0,224,164,.08);
      color: #b9ffef;
      font-size: 13px;
      font-weight: 700;
    }

    .pulse {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--primary);
      box-shadow: 0 0 0 0 rgba(0,224,164,.62);
      animation: pulse 1.8s infinite;
    }

    @keyframes pulse {
      0% { box-shadow: 0 0 0 0 rgba(0,224,164,.56); }
      70% { box-shadow: 0 0 0 10px rgba(0,224,164,0); }
      100% { box-shadow: 0 0 0 0 rgba(0,224,164,0); }
    }

    .gradient-title {
      background: linear-gradient(135deg, #fff 0%, #c7fff0 40%, #ffb199 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 11px;
      border-radius: 999px;
      border: 1px solid var(--border);
      color: rgba(245,247,251,.82);
      background: rgba(255,255,255,.05);
      font-size: 13px;
      line-height: 1;
      white-space: nowrap;
    }

    .tag.hot { border-color: rgba(255,107,53,.32); background: rgba(255,107,53,.10); color: #ffd4c6; }
    .tag.live { border-color: rgba(0,224,164,.32); background: rgba(0,224,164,.10); color: #b9ffef; }

    .panel {
      border: 1px solid var(--border);
      background: linear-gradient(180deg, rgba(23,29,40,.92), rgba(18,22,31,.92));
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .card {
      border: 1px solid var(--border);
      background: rgba(18,22,31,.82);
      border-radius: var(--radius);
      transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
      overflow: hidden;
    }

    .card:hover {
      transform: translateY(-2px);
      border-color: rgba(0,224,164,.34);
      background: rgba(23,29,40,.94);
      box-shadow: 0 18px 56px rgba(0,0,0,.28);
    }

    .section-kicker {
      color: var(--primary);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0;
      margin-bottom: 10px;
    }

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

    .section-desc {
      color: var(--text-muted);
      max-width: 760px;
      margin-top: 14px;
      font-size: 16px;
    }

    .metric-card {
      padding: 20px;
      border-radius: 16px;
      border: 1px solid var(--border);
      background:
        linear-gradient(135deg, rgba(0,224,164,.08), transparent 42%),
        rgba(18,22,31,.82);
    }

    .metric-value {
      font-size: 32px;
      line-height: 1;
      font-weight: 900;
      color: #fff;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 26px;
      padding: 4px 9px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }

    .badge-green { color: #b9ffef; background: rgba(0,224,164,.12); border: 1px solid rgba(0,224,164,.26); }
    .badge-orange { color: #ffd4c6; background: rgba(255,107,53,.12); border: 1px solid rgba(255,107,53,.28); }
    .badge-blue { color: #d2e4ff; background: rgba(105,167,255,.12); border: 1px solid rgba(105,167,255,.26); }
    .badge-gray { color: #cbd5e1; background: rgba(148,163,184,.12); border: 1px solid rgba(148,163,184,.20); }

    .game-card .cover {
      aspect-ratio: 16 / 9;
      position: relative;
      overflow: hidden;
      background: #111722;
    }

    .game-card .cover img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .45s ease;
    }

    .game-card:hover .cover img { transform: scale(1.04); }

    .game-card .cover::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 10%, rgba(9,11,15,.80) 100%);
    }

    .game-card .cover-label {
      position: absolute;
      left: 16px;
      right: 16px;
      bottom: 14px;
      z-index: 2;
    }

    .data-row {
      display: grid;
      grid-template-columns: 1.1fr .9fr .9fr .8fr .8fr;
      gap: 16px;
      align-items: center;
      padding: 16px 18px;
      border-bottom: 1px solid var(--border);
      min-width: 820px;
    }

    .data-row.header {
      color: #cbd5e1;
      font-size: 13px;
      font-weight: 800;
      background: rgba(255,255,255,.04);
    }

    .data-row:last-child { border-bottom: 0; }

    .rank-item {
      display: grid;
      grid-template-columns: 42px 1fr auto;
      gap: 14px;
      align-items: center;
      padding: 14px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: rgba(255,255,255,.04);
      transition: border-color .2s ease, transform .2s ease;
    }

    .rank-item:hover {
      transform: translateY(-1px);
      border-color: rgba(255,107,53,.34);
    }

    .rank-num {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      background: rgba(255,107,53,.12);
      color: #ffd4c6;
      font-weight: 900;
    }

    .progress {
      height: 8px;
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      overflow: hidden;
    }

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

    .timeline {
      position: relative;
      padding-left: 22px;
    }

    .timeline::before {
      content: "";
      position: absolute;
      top: 8px;
      bottom: 8px;
      left: 6px;
      width: 1px;
      background: linear-gradient(180deg, var(--primary), rgba(255,255,255,.08));
    }

    .timeline-item {
      position: relative;
      padding: 0 0 22px 18px;
    }

    .timeline-item::before {
      content: "";
      position: absolute;
      left: -20px;
      top: 8px;
      width: 11px;
      height: 11px;
      border-radius: 999px;
      background: var(--primary);
      box-shadow: 0 0 0 5px rgba(0,224,164,.12);
    }

    .faq-item {
      border: 1px solid var(--border);
      border-radius: 16px;
      background: rgba(18,22,31,.78);
      overflow: hidden;
    }

    .faq-question {
      width: 100%;
      text-align: left;
      padding: 18px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      color: #fff;
      font-weight: 800;
      cursor: pointer;
    }

    .faq-answer {
      display: none;
      padding: 0 20px 18px;
      color: var(--text-muted);
      font-size: 15px;
    }

    .faq-item.open .faq-answer { display: block; }
    .faq-icon { transition: transform .2s ease; }
    .faq-item.open .faq-icon { transform: rotate(45deg); }

    .form-control {
      width: 100%;
      min-height: 46px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.06);
      color: #fff;
      padding: 12px 14px;
      outline: none;
      transition: border-color .2s ease, background .2s ease;
    }

    .form-control:focus {
      border-color: rgba(0,224,164,.58);
      background: rgba(255,255,255,.08);
    }

    .form-control::placeholder { color: rgba(154,164,178,.72); }

    .cta-band {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(0,224,164,.22);
      border-radius: 24px;
      background:
        linear-gradient(135deg, rgba(0,224,164,.16), rgba(255,107,53,.10)),
        url("/assets/images/backpic/back-3.webp");
      background-size: cover;
      background-position: center;
      box-shadow: var(--shadow);
    }

    .cta-band::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(9,11,15,.76);
    }

    .cta-band > * { position: relative; z-index: 1; }

    .subtle-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
    }

    .footer {
      background: #07090d;
      border-top: 1px solid rgba(255,255,255,.08);
      color: #e5e7eb;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.4fr repeat(4, 1fr);
      gap: 34px;
    }

    .footer a {
      color: #9aa4b2;
      transition: color .2s ease, transform .2s ease;
    }

    .footer a:hover {
      color: #fff;
      transform: translateX(2px);
    }

    @media (max-width: 1024px) {
      .container { width: min(100% - 32px, 920px); }
      .hero { min-height: auto; padding-top: 136px; }
      .footer-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 768px) {
      .site-header { top: 10px; }
      .nav-shell { width: min(100% - 24px, 720px); border-radius: 16px; }
      .section { padding: 60px 0; }
      .section-tight { padding: 48px 0; }
      .hero { padding: 124px 0 58px; }
      .btn { width: 100%; }
      .metric-value { font-size: 28px; }
      .footer-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 520px) {
      .container { width: min(100% - 24px, 480px); }
      .hero h1 { font-size: 34px; }
      .section-title { font-size: 28px; }
      .tag { font-size: 12px; padding: 7px 10px; }
      .panel, .card { border-radius: 16px; }
    }

/* roulang page: category5 */
:root{
      --bg:#090b0f;
      --panel:#12161f;
      --panel-soft:#171d28;
      --panel-strong:#1d2532;
      --primary:#00e0a4;
      --accent:#ff6b35;
      --info:#69a7ff;
      --text-main:#f5f7fb;
      --text-muted:#9aa4b2;
      --border:rgba(255,255,255,.10);
      --border-strong:rgba(0,224,164,.32);
      --shadow:0 22px 70px rgba(0,0,0,.38);
      --radius:18px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
      background:
        radial-gradient(circle at 18% 4%,rgba(0,224,164,.14),transparent 30%),
        radial-gradient(circle at 82% 10%,rgba(255,107,53,.10),transparent 28%),
        linear-gradient(180deg,#090b0f 0%,#0b0d12 48%,#080a0d 100%);
      color:var(--text-main);
      line-height:1.75;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    ::selection{background:rgba(0,224,164,.28);color:#fff}
    .container{width:min(1180px,calc(100% - 40px));margin-inline:auto}
    .section{padding:86px 0}
    .section-tight{padding:58px 0}
    .header{
      position:fixed;
      top:14px;
      left:0;
      right:0;
      z-index:50;
      transition:all .28s ease;
    }
    .header-inner{
      width:min(1180px,calc(100% - 32px));
      margin:0 auto;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(9,11,15,.58);
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
      border-radius:20px;
      box-shadow:0 16px 50px rgba(0,0,0,.26);
    }
    .header.scrolled{top:0}
    .header.scrolled .header-inner{
      width:100%;
      border-radius:0;
      border-left:0;
      border-right:0;
      background:rgba(9,11,15,.92);
    }
    .nav-link{
      position:relative;
      color:rgba(245,247,251,.78);
      transition:color .2s ease;
      white-space:nowrap;
    }
    .nav-link:after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:-10px;
      height:2px;
      border-radius:999px;
      background:linear-gradient(90deg,var(--primary),var(--accent));
      transform:scaleX(0);
      transform-origin:center;
      transition:transform .22s ease;
    }
    .nav-link:hover,.nav-link.active{color:#fff}
    .nav-link:hover:after,.nav-link.active:after{transform:scaleX(1)}
    .search-pill{
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.05);
      color:rgba(245,247,251,.72);
      border-radius:13px;
      padding:9px 12px;
      transition:all .2s ease;
    }
    .search-pill:hover{border-color:rgba(0,224,164,.34);color:#fff;background:rgba(0,224,164,.07)}
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      border-radius:14px;
      padding:12px 18px;
      font-weight:700;
      line-height:1.2;
      transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease,color .2s ease;
      border:1px solid transparent;
    }
    .btn:focus-visible,.faq-button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{
      outline:2px solid rgba(0,224,164,.75);
      outline-offset:3px;
    }
    .btn-primary{
      background:linear-gradient(135deg,var(--primary),#8affdf);
      color:#06110f;
      box-shadow:0 14px 34px rgba(0,224,164,.20);
    }
    .btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(0,224,164,.30)}
    .btn-secondary{
      border-color:rgba(255,255,255,.16);
      background:rgba(255,255,255,.05);
      color:#fff;
    }
    .btn-secondary:hover{transform:translateY(-2px);background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.26)}
    .hero{
      min-height:720px;
      padding:168px 0 88px;
      position:relative;
      overflow:hidden;
      background-image:
        linear-gradient(90deg,rgba(9,11,15,.94) 0%,rgba(9,11,15,.78) 48%,rgba(9,11,15,.92) 100%),
        url('/assets/images/backpic/back-2.webp');
      background-size:cover;
      background-position:center;
    }
    .hero:before{
      content:"";
      position:absolute;
      inset:0;
      background-image:
        linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
      background-size:46px 46px;
      mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),transparent 86%);
      pointer-events:none;
    }
    .hero:after{
      content:"";
      position:absolute;
      width:520px;
      height:520px;
      border-radius:999px;
      right:-180px;
      top:110px;
      background:radial-gradient(circle,rgba(255,107,53,.18),transparent 62%);
      filter:blur(4px);
      pointer-events:none;
    }
    .hero-content{position:relative;z-index:1}
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 11px;
      border-radius:999px;
      border:1px solid rgba(0,224,164,.22);
      background:rgba(0,224,164,.08);
      color:#a8ffe9;
      font-size:13px;
      font-weight:700;
    }
    .pulse-dot{
      width:8px;
      height:8px;
      border-radius:999px;
      background:var(--primary);
      box-shadow:0 0 0 0 rgba(0,224,164,.6);
      animation:pulse 1.8s infinite;
    }
    @keyframes pulse{
      0%{box-shadow:0 0 0 0 rgba(0,224,164,.55)}
      70%{box-shadow:0 0 0 10px rgba(0,224,164,0)}
      100%{box-shadow:0 0 0 0 rgba(0,224,164,0)}
    }
    .hero h1{
      font-size:54px;
      line-height:1.08;
      letter-spacing:.01em;
      margin:22px 0 20px;
      font-weight:900;
    }
    .hero p{color:rgba(245,247,251,.76);font-size:17px}
    .tag{
      display:inline-flex;
      align-items:center;
      gap:6px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.055);
      color:rgba(245,247,251,.82);
      padding:7px 10px;
      font-size:13px;
      white-space:nowrap;
      transition:all .2s ease;
    }
    .tag:hover{border-color:rgba(0,224,164,.28);background:rgba(0,224,164,.08);color:#fff}
    .card{
      border:1px solid var(--border);
      background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
      border-radius:var(--radius);
      box-shadow:0 16px 46px rgba(0,0,0,.20);
      transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease;
    }
    .card:hover{transform:translateY(-2px);border-color:rgba(0,224,164,.28);background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));box-shadow:0 20px 54px rgba(0,0,0,.28)}
    .panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius)}
    .panel-soft{background:var(--panel-soft);border:1px solid var(--border);border-radius:var(--radius)}
    .badge{
      display:inline-flex;
      align-items:center;
      gap:6px;
      border-radius:999px;
      padding:5px 9px;
      font-size:12px;
      font-weight:700;
      border:1px solid rgba(255,255,255,.10);
      color:rgba(245,247,251,.82);
      background:rgba(255,255,255,.05);
      white-space:nowrap;
    }
    .badge-primary{background:rgba(0,224,164,.10);border-color:rgba(0,224,164,.26);color:#91ffe4}
    .badge-accent{background:rgba(255,107,53,.12);border-color:rgba(255,107,53,.30);color:#ffb39a}
    .badge-info{background:rgba(105,167,255,.12);border-color:rgba(105,167,255,.28);color:#b8d4ff}
    .badge-muted{background:rgba(154,164,178,.10);border-color:rgba(154,164,178,.20);color:#cbd3df}
    .section-title{max-width:760px}
    .section-title h2{
      font-size:34px;
      line-height:1.22;
      font-weight:900;
      margin-bottom:12px;
    }
    .section-title p{color:var(--text-muted);font-size:16px}
    .metric{
      padding:18px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.09);
      background:rgba(255,255,255,.045);
    }
    .metric .num{font-size:30px;line-height:1;font-weight:900;color:#fff}
    .metric .label{color:var(--text-muted);font-size:13px;margin-top:7px}
    .table-wrap{
      overflow-x:auto;
      border-radius:18px;
      border:1px solid var(--border);
      background:rgba(18,22,31,.84);
      box-shadow:var(--shadow);
    }
    table{width:100%;border-collapse:separate;border-spacing:0;min-width:880px}
    th,td{padding:16px 18px;text-align:left;border-bottom:1px solid rgba(255,255,255,.08);vertical-align:middle}
    th{font-size:13px;color:#c9d2df;background:rgba(255,255,255,.045);font-weight:800}
    td{font-size:14px;color:rgba(245,247,251,.82)}
    tr:last-child td{border-bottom:0}
    tbody tr{transition:background .18s ease}
    tbody tr:hover{background:rgba(0,224,164,.045)}
    .feature-list li{
      display:flex;
      gap:12px;
      padding:14px 0;
      border-bottom:1px solid rgba(255,255,255,.08);
      color:rgba(245,247,251,.78);
    }
    .feature-list li:last-child{border-bottom:0}
    .check{
      width:22px;
      height:22px;
      border-radius:8px;
      flex:0 0 auto;
      background:rgba(0,224,164,.12);
      color:var(--primary);
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:900;
    }
    .cover{
      position:relative;
      overflow:hidden;
      border-radius:22px;
      border:1px solid rgba(255,255,255,.10);
      background:#111722;
    }
    .cover img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.03)}
    .cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 26%,rgba(9,11,15,.82) 100%)}
    .news-card{
      display:grid;
      grid-template-columns:142px 1fr;
      gap:16px;
      padding:14px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.09);
      background:rgba(255,255,255,.045);
      transition:all .2s ease;
    }
    .news-card:hover{border-color:rgba(0,224,164,.26);background:rgba(255,255,255,.065);transform:translateY(-2px)}
    .news-card img{height:96px;width:142px;object-fit:cover;border-radius:14px}
    .rank-item{
      display:grid;
      grid-template-columns:34px 1fr auto;
      gap:12px;
      align-items:center;
      padding:14px;
      border-radius:16px;
      background:rgba(255,255,255,.045);
      border:1px solid rgba(255,255,255,.08);
    }
    .rank-no{
      width:30px;height:30px;border-radius:10px;
      display:flex;align-items:center;justify-content:center;
      background:rgba(0,224,164,.10);
      color:#a8ffe9;font-weight:900;
    }
    .faq-item{border:1px solid rgba(255,255,255,.10);border-radius:18px;background:rgba(255,255,255,.045);overflow:hidden}
    .faq-button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px;text-align:left;font-weight:800;color:#fff}
    .faq-answer{display:none;padding:0 20px 20px;color:var(--text-muted);font-size:15px}
    .faq-item.open{border-color:rgba(0,224,164,.28);background:rgba(0,224,164,.045)}
    .faq-item.open .faq-answer{display:block}
    .faq-icon{transition:transform .2s ease;color:var(--primary)}
    .faq-item.open .faq-icon{transform:rotate(45deg)}
    .form-control{
      width:100%;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.055);
      color:#fff;
      padding:13px 14px;
      transition:border-color .18s ease,background .18s ease;
    }
    .form-control::placeholder{color:rgba(154,164,178,.75)}
    .form-control:focus{border-color:rgba(0,224,164,.60);background:rgba(0,224,164,.055);outline:none}
    .subtle-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent)}
    .cta-band{
      position:relative;
      overflow:hidden;
      border-radius:28px;
      border:1px solid rgba(0,224,164,.22);
      background:
        linear-gradient(135deg,rgba(0,224,164,.16),rgba(255,107,53,.10)),
        url('/assets/images/backpic/back-3.webp');
      background-size:cover;
      background-position:center;
      box-shadow:var(--shadow);
    }
    .cta-band:before{content:"";position:absolute;inset:0;background:rgba(9,11,15,.72)}
    .cta-band>*{position:relative;z-index:1}
    .footer{background:#07090c;border-top:1px solid rgba(255,255,255,.10);color:#f5f7fb}
    .footer-grid{display:grid;grid-template-columns:1.45fr repeat(4,1fr);gap:34px}
    .footer a{color:rgba(245,247,251,.62);transition:color .18s ease,transform .18s ease}
    .footer a:hover{color:var(--primary);transform:translateX(2px)}
    .mobile-menu{
      display:none;
      border-top:1px solid rgba(255,255,255,.10);
      padding:14px;
    }
    .mobile-menu.open{display:block}
    .mobile-menu a{display:block;padding:12px 10px;border-radius:12px;color:rgba(245,247,251,.82)}
    .mobile-menu a.active,.mobile-menu a:hover{background:rgba(0,224,164,.08);color:#fff}
    @media (max-width:1024px){
      .hero{padding-top:144px;min-height:auto}
      .hero h1{font-size:42px}
      .section{padding:68px 0}
      .footer-grid{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width:768px){
      .container{width:min(100% - 28px,1180px)}
      .header{top:10px}
      .header-inner{width:calc(100% - 20px);border-radius:18px}
      .hero{padding:128px 0 58px}
      .hero h1{font-size:36px}
      .section-title h2{font-size:28px}
      .news-card{grid-template-columns:1fr}
      .news-card img{width:100%;height:170px}
      .footer-grid{grid-template-columns:1fr}
      .btn{width:100%}
    }
    @media (max-width:520px){
      .hero h1{font-size:32px}
      .hero p{font-size:15px}
      .section{padding:54px 0}
      th,td{padding:13px 14px}
      .metric .num{font-size:25px}
      .rank-item{grid-template-columns:30px 1fr}
      .rank-item .badge{grid-column:2}
    }

/* roulang page: category6 */
:root{
      --bg:#090b0f;
      --panel:#12161f;
      --panel-soft:#171d28;
      --primary:#00e0a4;
      --accent:#ff6b35;
      --info:#69a7ff;
      --text-main:#f5f7fb;
      --text-muted:#9aa4b2;
      --border:rgba(255,255,255,.10);
      --border-strong:rgba(0,224,164,.32);
      --radius:18px;
      --radius-lg:26px;
      --shadow:0 24px 80px rgba(0,0,0,.38);
      --shadow-card:0 18px 44px rgba(0,0,0,.28);
      --container:1280px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
      color:var(--text-main);
      background:
        radial-gradient(circle at 16% 6%,rgba(0,224,164,.18),transparent 30%),
        radial-gradient(circle at 88% 18%,rgba(255,107,53,.13),transparent 28%),
        linear-gradient(180deg,#080a0e 0%,#0b0d12 42%,#090b0f 100%);
      line-height:1.75;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
      overflow-x:hidden;
    }
    body.menu-open{overflow:hidden}
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer;border:0}
    ::selection{background:rgba(0,224,164,.28);color:#fff}
    .container{width:min(var(--container),calc(100% - 40px));margin-inline:auto}
    .section{padding:86px 0}
    .section-tight{padding:56px 0}
    .eyebrow{
      display:inline-flex;align-items:center;gap:8px;
      color:var(--primary);font-size:13px;font-weight:800;letter-spacing:.08em;
      text-transform:uppercase;background:rgba(0,224,164,.08);
      border:1px solid rgba(0,224,164,.18);border-radius:999px;padding:7px 12px;
    }
    .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--primary);box-shadow:0 0 16px rgba(0,224,164,.8)}
    .section-title{font-size:clamp(28px,3vw,38px);line-height:1.22;font-weight:900;letter-spacing:-.02em}
    .section-desc{color:var(--text-muted);font-size:16px;max-width:760px}
    .glass-nav{
      position:fixed;top:16px;left:50%;transform:translateX(-50%);
      width:min(var(--container),calc(100% - 32px));z-index:80;
      background:rgba(9,11,15,.64);border:1px solid var(--border);
      backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
      box-shadow:0 18px 50px rgba(0,0,0,.26);
      border-radius:20px;transition:all .28s ease;
    }
    .glass-nav.nav-solid{top:8px;background:rgba(9,11,15,.92);border-color:rgba(255,255,255,.14)}
    .nav-link{
      position:relative;color:rgba(245,247,251,.72);font-weight:700;
      transition:color .2s ease;
      white-space:nowrap;
    }
    .nav-link::after{
      content:"";position:absolute;left:0;right:0;bottom:-10px;height:2px;
      background:linear-gradient(90deg,var(--primary),var(--accent));
      transform:scaleX(0);transform-origin:center;transition:transform .2s ease;border-radius:999px;
    }
    .nav-link:hover,.nav-link.active{color:#fff}
    .nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}
    .brand-mark{background:linear-gradient(135deg,rgba(0,224,164,.28),rgba(255,107,53,.18));border:1px solid rgba(255,255,255,.12)}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:9px;
      min-height:46px;padding:0 18px;border-radius:14px;
      font-weight:850;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
      outline:none;
    }
    .btn:focus-visible,.nav-link:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
      outline:3px solid rgba(0,224,164,.3);outline-offset:3px;
    }
    .btn-primary{background:var(--primary);color:#06100d;box-shadow:0 16px 34px rgba(0,224,164,.2)}
    .btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 46px rgba(0,224,164,.28);background:#21edb6}
    .btn-secondary{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.14)}
    .btn-secondary:hover{transform:translateY(-2px);background:rgba(255,255,255,.10);border-color:rgba(0,224,164,.34)}
    .hero{
      min-height:760px;display:flex;align-items:center;position:relative;overflow:hidden;
      padding:136px 0 76px;background-image:
      linear-gradient(90deg,rgba(9,11,15,.94) 0%,rgba(9,11,15,.78) 48%,rgba(9,11,15,.62) 100%),
      url('/assets/images/backpic/back-3.webp');
      background-size:cover;background-position:center;
    }
    .hero::before{
      content:"";position:absolute;inset:0;
      background-image:
      linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
      background-size:44px 44px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),transparent 88%);
      pointer-events:none;
    }
    .hero::after{
      content:"";position:absolute;width:520px;height:520px;border-radius:50%;right:-180px;top:120px;
      background:radial-gradient(circle,rgba(0,224,164,.16),transparent 64%);filter:blur(4px);
    }
    .hero-card,.card,.panel{
      background:linear-gradient(180deg,rgba(18,22,31,.92),rgba(14,18,26,.86));
      border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-card);
    }
    .card,.panel{transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease}
    .card:hover{transform:translateY(-2px);border-color:rgba(0,224,164,.28);background:linear-gradient(180deg,rgba(23,29,40,.96),rgba(16,21,30,.9))}
    .badge{
      display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 10px;
      font-size:12px;font-weight:800;line-height:1.2;border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.06);color:#dbe4ef;white-space:nowrap;
    }
    .badge-live{background:rgba(0,224,164,.12);border-color:rgba(0,224,164,.32);color:#74ffd4}
    .badge-hot{background:rgba(255,107,53,.13);border-color:rgba(255,107,53,.3);color:#ffb197}
    .badge-info{background:rgba(105,167,255,.12);border-color:rgba(105,167,255,.28);color:#bcd7ff}
    .pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 0 rgba(0,224,164,.65);animation:pulse 1.55s infinite}
    @keyframes pulse{70%{box-shadow:0 0 0 10px rgba(0,224,164,0)}100%{box-shadow:0 0 0 0 rgba(0,224,164,0)}}
    .timeline-line{position:relative}
    .timeline-line::before{content:"";position:absolute;left:18px;top:20px;bottom:20px;width:1px;background:linear-gradient(var(--primary),rgba(255,255,255,.06))}
    .timeline-item{position:relative;padding-left:54px}
    .timeline-item::before{
      content:"";position:absolute;left:8px;top:9px;width:22px;height:22px;border-radius:50%;
      background:#0b0d12;border:5px solid var(--primary);box-shadow:0 0 24px rgba(0,224,164,.2)
    }
    .table-wrap{overflow-x:auto;border-radius:18px;border:1px solid var(--border);background:rgba(18,22,31,.72)}
    table{width:100%;border-collapse:collapse;min-width:920px}
    th,td{padding:16px 18px;text-align:left;border-bottom:1px solid rgba(255,255,255,.08);font-size:14px;vertical-align:middle}
    th{color:#dfe7f1;background:rgba(255,255,255,.045);font-weight:850}
    td{color:#cdd5df}
    tr:hover td{background:rgba(255,255,255,.028)}
    .form-field{
      width:100%;height:48px;border-radius:14px;border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.055);color:#fff;padding:0 14px;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
    }
    textarea.form-field{height:110px;padding:12px 14px;resize:vertical}
    .form-field:focus{border-color:rgba(0,224,164,.56);box-shadow:0 0 0 4px rgba(0,224,164,.09);background:rgba(255,255,255,.075)}
    .form-field::placeholder{color:#738092}
    .image-card{position:relative;overflow:hidden;border-radius:var(--radius-lg);border:1px solid var(--border)}
    .image-card img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
    .image-card:hover img{transform:scale(1.04)}
    .image-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 22%,rgba(9,11,15,.88) 100%)}
    .faq-item{border:1px solid var(--border);border-radius:18px;background:rgba(18,22,31,.72);overflow:hidden}
    .faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;text-align:left;padding:18px 20px;color:#fff;font-weight:850;background:transparent}
    .faq-a{display:none;padding:0 20px 18px;color:var(--text-muted);font-size:15px}
    .faq-item.open{border-color:rgba(0,224,164,.24);background:rgba(23,29,40,.82)}
    .faq-item.open .faq-a{display:block}
    .faq-icon{transition:transform .2s ease;color:var(--primary)}
    .faq-item.open .faq-icon{transform:rotate(45deg)}
    .subtle-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent)}
    .footer{background:#07090d;color:#d7dee8;border-top:1px solid rgba(255,255,255,.09)}
    .footer-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:34px}
    .footer a{color:#9aa4b2;transition:color .18s ease,transform .18s ease}
    .footer a:hover{color:var(--primary);transform:translateX(2px)}
    .mobile-panel{
      display:none;position:fixed;inset:86px 16px auto 16px;z-index:75;padding:18px;
      border-radius:22px;background:rgba(9,11,15,.96);border:1px solid rgba(255,255,255,.12);
      box-shadow:var(--shadow);backdrop-filter:blur(18px);
    }
    .mobile-panel.open{display:block}
    @media (max-width:1024px){
      .hero{min-height:auto;padding-top:130px}
      .footer-grid{grid-template-columns:1fr 1fr}
      .section{padding:70px 0}
    }
    @media (max-width:768px){
      .container{width:min(100% - 28px,var(--container))}
      .glass-nav{top:10px;width:calc(100% - 20px);border-radius:18px}
      .hero{padding:118px 0 54px}
      .section{padding:58px 0}
      .section-tight{padding:42px 0}
      .footer-grid{grid-template-columns:1fr}
      .btn{width:100%}
      th,td{padding:14px 13px}
    }
    @media (max-width:520px){
      .hero h1{font-size:34px!important}
      .section-title{font-size:28px}
      .timeline-line::before{left:14px}
      .timeline-item{padding-left:44px}
      .timeline-item::before{left:4px}
      .hero-card{border-radius:20px}
    }