/* roulang page: index */
:root{
      --bg:#09060F;
      --panel:#15111E;
      --panel2:#1B1326;
      --line:rgba(255,255,255,.09);
      --text:#F8F3FF;
      --muted:#C9BCD8;
      --pink:#FF2E88;
      --violet:#8B5CF6;
      --cyan:#22D3EE;
    }
    html{scroll-behavior:smooth}
    body{
      background:
        radial-gradient(circle at 15% 15%, rgba(255,46,136,.14), transparent 28%),
        radial-gradient(circle at 82% 14%, rgba(139,92,246,.18), transparent 26%),
        radial-gradient(circle at 50% 88%, rgba(34,211,238,.08), transparent 24%),
        linear-gradient(180deg, #09060F 0%, #0D0A15 56%, #09060F 100%);
      color:var(--text);
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    }
    body:before{
      content:"";
      position:fixed;
      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: 48px 48px;
      mask-image: radial-gradient(circle at center, rgba(0,0,0,.9), rgba(0,0,0,.25) 70%, transparent 100%);
      opacity:.22;
      z-index:-1;
    }
    body:after{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(135deg, rgba(255,46,136,.05), transparent 28%),
        linear-gradient(315deg, rgba(34,211,238,.04), transparent 24%);
      opacity:.8;
      z-index:-1;
    }
    ::selection{background: rgba(255,46,136,.35); color:#fff}
    a{color:inherit; text-decoration:none}
    .panel{
      background: rgba(21,17,30,.82);
      border: 1px solid rgba(255,255,255,.08);
      backdrop-filter: blur(18px);
      box-shadow: 0 20px 60px rgba(255,46,136,.08);
    }
    .panel-soft{
      background: rgba(27,19,38,.75);
      border: 1px solid rgba(255,255,255,.07);
      backdrop-filter: blur(16px);
    }
    .hover-card{
      transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease, background .24s ease;
    }
    .hover-card:hover{
      transform: translateY(-4px);
      border-color: rgba(255,46,136,.42);
      box-shadow: 0 20px 60px rgba(255,46,136,.12);
    }
    .accent-line{
      position: relative;
    }
    .accent-line:before{
      content:"";
      position:absolute;
      left:0;
      top:0;
      width:100%;
      height:2px;
      background: linear-gradient(90deg, var(--pink), var(--violet), transparent);
      opacity:.95;
    }
    .btn-primary{
      background: linear-gradient(135deg, var(--pink), var(--violet));
      box-shadow: 0 14px 30px rgba(255,46,136,.22);
    }
    .btn-primary:hover{
      filter: brightness(1.08);
      box-shadow: 0 18px 36px rgba(255,46,136,.28);
    }
    .btn-secondary{
      background: rgba(255,255,255,.03);
      border: 1px solid rgba(255,255,255,.12);
    }
    .btn-secondary:hover{
      background: rgba(255,255,255,.06);
      border-color: rgba(255,46,136,.3);
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.03);
      color:#F4ECFF;
    }
    .label{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding:.35rem .7rem;
      border-radius:999px;
      font-size:.78rem;
      font-weight:600;
      letter-spacing:.02em;
    }
    .label-pink{background: rgba(255,46,136,.15); color:#FFD1E5; border:1px solid rgba(255,46,136,.26)}
    .label-violet{background: rgba(139,92,246,.16); color:#E6D8FF; border:1px solid rgba(139,92,246,.26)}
    .label-cyan{background: rgba(34,211,238,.12); color:#D8FBFF; border:1px solid rgba(34,211,238,.22)}
    .label-warn{background: rgba(245,158,11,.15); color:#FFE2A9; border:1px solid rgba(245,158,11,.24)}
    .input-dark{
      width:100%;
      border-radius: 1rem;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      color: var(--text);
      outline:none;
      transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
    }
    .input-dark::placeholder{color:rgba(201,188,216,.55)}
    .input-dark:focus{
      border-color: rgba(255,46,136,.55);
      box-shadow: 0 0 0 4px rgba(255,46,136,.13);
      background: rgba(255,255,255,.05);
    }
    summary::-webkit-details-marker{display:none}
    .faq-item{
      border:1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.03);
      border-radius: 1.25rem;
      overflow:hidden;
    }
    .faq-item[open]{
      border-color: rgba(255,46,136,.24);
      box-shadow: 0 18px 40px rgba(255,46,136,.08);
    }
    .faq-chevron{
      transition: transform .2s ease;
    }
    .faq-item[open] .faq-chevron{
      transform: rotate(45deg);
    }
    .count-cell{
      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
      border:1px solid rgba(255,255,255,.08);
      border-radius: 1rem;
    }
    .scrollbar-thin::-webkit-scrollbar{height:8px;width:8px}
    .scrollbar-thin::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:999px}
    .scrollbar-thin::-webkit-scrollbar-track{background:transparent}
    .nav-link{
      position:relative;
      color:rgba(248,243,255,.78);
      transition: color .18s ease;
    }
    .nav-link:hover{color:#fff}
    .nav-link.active{
      color:#fff;
    }
    .nav-link.active:after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:-12px;
      height:2px;
      border-radius:999px;
      background: linear-gradient(90deg, var(--pink), var(--violet));
    }
    .focus-ring:focus-visible{
      outline: 2px solid rgba(255,46,136,.65);
      outline-offset: 3px;
    }
    .hero-orb{
      background:
        radial-gradient(circle at 30% 30%, rgba(255,46,136,.42), rgba(255,46,136,.0) 55%),
        radial-gradient(circle at 70% 20%, rgba(139,92,246,.32), rgba(139,92,246,.0) 58%);
      filter: blur(42px);
      opacity:.58;
    }

/* roulang page: category1 */
:root{
      --bg:#09060F;
      --bg-2:#111018;
      --panel:#15111E;
      --panel-2:#1B1326;
      --text:#F8F3FF;
      --muted:rgba(248,243,255,.68);
      --weak:rgba(248,243,255,.48);
      --line:rgba(255,255,255,.10);
      --line-strong:rgba(255,46,136,.42);
      --pink:#FF2E88;
      --violet:#8B5CF6;
      --cyan:#22D3EE;
      --amber:#F59E0B;
      --radius:24px;
      --radius-sm:16px;
      --shadow:0 26px 90px rgba(0,0,0,.42);
      --glow:0 18px 70px rgba(255,46,136,.15);
      --container:1280px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      min-height:100vh;
      color:var(--text);
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
      line-height:1.65;
      background:
        radial-gradient(circle at 12% 0%, rgba(255,46,136,.18), transparent 32rem),
        radial-gradient(circle at 86% 6%, rgba(139,92,246,.16), transparent 34rem),
        radial-gradient(circle at 55% 48%, rgba(34,211,238,.07), transparent 32rem),
        linear-gradient(180deg,#09060F 0%,#0B0711 48%,#07050D 100%);
      overflow-x:hidden;
      text-rendering:optimizeLegibility;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:-2;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
      background-size:42px 42px;
      mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.12));
    }
    body::after{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:-1;
      background:
        repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0 1px, transparent 1px 18px);
      opacity:.32;
    }
    a{color:inherit;text-decoration:none}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    input,select,textarea{outline:none}
    ::selection{background:rgba(255,46,136,.45);color:#fff}
    .site-header{
      position:sticky;
      top:0;
      z-index:50;
      border-bottom:1px solid rgba(255,255,255,.08);
      background:rgba(7,5,13,.72);
      backdrop-filter:blur(20px);
      transition:box-shadow .25s ease, background .25s ease, border-color .25s ease;
    }
    .site-header.is-scrolled{
      background:rgba(7,5,13,.92);
      border-color:rgba(255,46,136,.18);
      box-shadow:0 18px 45px rgba(0,0,0,.35);
    }
    .nav-link{
      position:relative;
      color:rgba(248,243,255,.68);
      transition:color .2s ease;
      padding:.55rem 0;
    }
    .nav-link::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:.18rem;
      height:2px;
      border-radius:99px;
      background:linear-gradient(90deg,var(--pink),var(--violet));
      transform:scaleX(0);
      transform-origin:left;
      transition:transform .22s ease;
      box-shadow:0 0 18px rgba(255,46,136,.55);
    }
    .nav-link:hover,.nav-link.active{color:#fff}
    .nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}
    .brand-mark{
      box-shadow:inset 0 0 18px rgba(255,46,136,.14),0 0 24px rgba(139,92,246,.12);
    }
    .btn-primary{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      border:1px solid rgba(255,255,255,.12);
      border-radius:999px;
      background:linear-gradient(135deg,var(--pink),var(--violet));
      color:#fff;
      font-weight:800;
      letter-spacing:.01em;
      box-shadow:0 16px 42px rgba(255,46,136,.22), inset 0 1px 0 rgba(255,255,255,.22);
      transition:transform .2s ease, filter .2s ease, box-shadow .2s ease;
    }
    .btn-primary:hover{
      transform:translateY(-2px);
      filter:brightness(1.08);
      box-shadow:0 22px 62px rgba(255,46,136,.32),0 0 0 5px rgba(255,46,136,.08), inset 0 1px 0 rgba(255,255,255,.28);
    }
    .btn-secondary{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      border:1px solid rgba(255,255,255,.12);
      border-radius:999px;
      background:rgba(255,255,255,.05);
      color:#fff;
      font-weight:750;
      transition:transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
    }
    .btn-secondary:hover{
      transform:translateY(-2px);
      border-color:rgba(34,211,238,.42);
      background:rgba(34,211,238,.08);
      box-shadow:0 0 0 5px rgba(34,211,238,.06);
    }
    .btn-primary:focus-visible,.btn-secondary:focus-visible,.faq-button:focus-visible,.menu-toggle:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
      outline:2px solid var(--cyan);
      outline-offset:3px;
    }
    .section-pad{padding:88px 0}
    .panel{
      border:1px solid var(--line);
      background:linear-gradient(180deg,rgba(27,19,38,.88),rgba(15,11,22,.88));
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      position:relative;
      overflow:hidden;
    }
    .panel::before{
      content:"";
      position:absolute;
      inset:0 0 auto 0;
      height:2px;
      background:linear-gradient(90deg,transparent,var(--pink),var(--violet),transparent);
      opacity:.72;
    }
    .card{
      position:relative;
      border:1px solid var(--line);
      background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.028));
      border-radius:22px;
      overflow:hidden;
      transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
    }
    .card:hover{
      transform:translateY(-5px);
      border-color:rgba(255,46,136,.45);
      box-shadow:var(--glow);
      background:linear-gradient(180deg,rgba(255,46,136,.07),rgba(255,255,255,.032));
    }
    .card::after{
      content:"";
      position:absolute;
      top:0;
      left:18px;
      right:18px;
      height:2px;
      background:linear-gradient(90deg,transparent,rgba(255,46,136,.9),rgba(34,211,238,.75),transparent);
      opacity:0;
      transition:opacity .22s ease;
    }
    .card:hover::after{opacity:1}
    .badge{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      border:1px solid rgba(255,255,255,.10);
      border-radius:999px;
      background:rgba(255,255,255,.055);
      padding:.42rem .72rem;
      font-size:.78rem;
      line-height:1;
      color:rgba(248,243,255,.76);
      white-space:nowrap;
    }
    .badge::before{
      content:"";
      width:.42rem;
      height:.42rem;
      border-radius:999px;
      background:var(--cyan);
      box-shadow:0 0 14px rgba(34,211,238,.8);
    }
    .badge-pink::before{background:var(--pink);box-shadow:0 0 14px rgba(255,46,136,.8)}
    .badge-amber::before{background:var(--amber);box-shadow:0 0 14px rgba(245,158,11,.55)}
    .neon-title{
      position:relative;
      display:inline-flex;
      align-items:center;
      gap:.75rem;
    }
    .neon-title::before{
      content:"";
      width:3px;
      height:1.25em;
      border-radius:99px;
      background:linear-gradient(180deg,var(--pink),var(--violet));
      box-shadow:0 0 18px rgba(255,46,136,.65);
      flex:0 0 auto;
    }
    .crumb a{color:rgba(248,243,255,.58)}
    .crumb a:hover{color:#fff}
    .filter-pill{
      border:1px solid rgba(255,255,255,.11);
      background:rgba(255,255,255,.045);
      color:rgba(248,243,255,.72);
      border-radius:999px;
      padding:.68rem 1rem;
      transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
      white-space:nowrap;
    }
    .filter-pill:hover,.filter-pill.active{
      color:#fff;
      border-color:rgba(255,46,136,.46);
      background:rgba(255,46,136,.11);
      transform:translateY(-1px);
    }
    .cover-art{
      height:168px;
      border-radius:18px;
      position:relative;
      overflow:hidden;
      background:
        radial-gradient(circle at 22% 18%, rgba(255,46,136,.55), transparent 28%),
        radial-gradient(circle at 82% 24%, rgba(34,211,238,.32), transparent 26%),
        linear-gradient(135deg, rgba(139,92,246,.55), rgba(17,16,24,.94) 54%, rgba(255,46,136,.26));
      transition:transform .25s ease,filter .25s ease;
    }
    .card:hover .cover-art{transform:scale(1.025);filter:saturate(1.12)}
    .cover-art::before{
      content:"";
      position:absolute;
      inset:0;
      background-image:
        linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
      background-size:22px 22px;
      opacity:.32;
    }
    .cover-art::after{
      content:"";
      position:absolute;
      inset:auto -20% -35% -20%;
      height:70%;
      background:radial-gradient(ellipse at center,rgba(255,46,136,.42),transparent 62%);
      filter:blur(10px);
    }
    .num{
      position:absolute;
      left:16px;
      top:14px;
      z-index:2;
      color:#fff;
      font-weight:900;
      letter-spacing:.08em;
      text-shadow:0 0 20px rgba(255,46,136,.8);
    }
    .status-chip{
      position:absolute;
      right:14px;
      top:14px;
      z-index:2;
      border:1px solid rgba(255,255,255,.16);
      background:rgba(9,6,15,.72);
      backdrop-filter:blur(10px);
      border-radius:999px;
      padding:.35rem .62rem;
      font-size:.72rem;
      color:rgba(248,243,255,.78);
    }
    .rule-list li{
      display:flex;
      gap:.75rem;
      align-items:flex-start;
      color:rgba(248,243,255,.68);
    }
    .rule-list li+li{margin-top:.85rem}
    .rule-list li span:first-child{
      width:1.35rem;
      height:1.35rem;
      flex:0 0 auto;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:999px;
      background:rgba(34,211,238,.10);
      color:var(--cyan);
      border:1px solid rgba(34,211,238,.25);
      font-size:.78rem;
      margin-top:.12rem;
    }
    .step-line{
      position:absolute;
      left:1.25rem;
      top:2.8rem;
      bottom:2.8rem;
      width:1px;
      background:linear-gradient(180deg,var(--pink),var(--violet),var(--cyan));
      opacity:.55;
    }
    .faq-item{
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.045);
      border-radius:18px;
      overflow:hidden;
      transition:border-color .2s ease,background .2s ease;
    }
    .faq-item:hover{border-color:rgba(255,46,136,.28);background:rgba(255,255,255,.06)}
    .faq-button{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding:1.15rem 1.25rem;
      text-align:left;
      color:#fff;
      font-weight:800;
    }
    .faq-content{
      max-height:0;
      overflow:hidden;
      transition:max-height .22s ease;
    }
    .faq-item.open .faq-content{max-height:220px}
    .faq-arrow{
      width:1.7rem;
      height:1.7rem;
      border-radius:999px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:rgba(255,255,255,.06);
      color:var(--cyan);
      transition:transform .22s ease,background .22s ease;
      flex:0 0 auto;
    }
    .faq-item.open .faq-arrow{transform:rotate(45deg);background:rgba(255,46,136,.14);color:#fff}
    .form-field{
      width:100%;
      border:1px solid rgba(255,255,255,.11);
      border-radius:16px;
      background:rgba(7,5,13,.68);
      color:#fff;
      padding:.95rem 1rem;
      transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .form-field::placeholder{color:rgba(248,243,255,.36)}
    .form-field:focus{
      border-color:rgba(255,46,136,.55);
      background:rgba(7,5,13,.88);
      box-shadow:0 0 0 5px rgba(255,46,136,.08);
    }
    .mobile-menu{
      max-height:0;
      overflow:hidden;
      transition:max-height .26s ease;
    }
    .mobile-menu.open{max-height:320px}
    @media (max-width:1024px){
      .section-pad{padding:72px 0}
      .cover-art{height:150px}
    }
    @media (max-width:768px){
      .section-pad{padding:58px 0}
      .panel{border-radius:20px}
      .card{border-radius:18px}
      .filter-scroll{overflow-x:auto;scrollbar-width:none}
      .filter-scroll::-webkit-scrollbar{display:none}
    }
    @media (max-width:520px){
      .btn-primary,.btn-secondary{width:100%}
      .cover-art{height:142px}
      .badge{font-size:.72rem}
    }