/* roulang page: index */
:root{
      --bg:#09070A;
      --bg-2:#120D13;
      --card:#141015;
      --card-2:#1A121A;
      --line:rgba(255,255,255,.10);
      --line-2:rgba(255,255,255,.16);
      --text:#F6EEF4;
      --muted:#C7B6C3;
      --soft:#9C8A98;
      --rose:#FF5678;
      --rose-2:#FF7F5C;
      --amber:#FFC85E;
      --violet:#8E5CFF;
      --shadow:0 24px 80px rgba(0,0,0,.42);
      --radius:24px;
      --radius-sm:18px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
      color:var(--text);
      background:
        radial-gradient(1000px circle at 15% 0%, rgba(255,86,120,.20), transparent 42%),
        radial-gradient(900px circle at 85% 6%, rgba(255,200,94,.16), transparent 38%),
        radial-gradient(1200px circle at 50% 100%, rgba(142,92,255,.12), transparent 48%),
        linear-gradient(180deg, #09070A 0%, #100D11 42%, #09070A 100%);
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(120deg, rgba(255,255,255,.025) 0, rgba(255,255,255,0) 18%),
        linear-gradient(300deg, rgba(255,255,255,.02) 0, rgba(255,255,255,0) 18%);
      mix-blend-mode:screen;
      opacity:.65;
      z-index:0;
    }
    .noise::after{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background-image:
        radial-gradient(rgba(255,255,255,.08) 0.6px, transparent 0.6px);
      background-size:14px 14px;
      opacity:.12;
      mask-image:linear-gradient(180deg, rgba(0,0,0,.95), rgba(0,0,0,.15));
      border-radius:inherit;
    }
    a,button,input,textarea,summary{
      transition:all .2s ease;
    }
    a{text-decoration:none}
    img{max-width:100%;display:block}
    .container-xl{max-width:1280px}
    .glass{
      background:linear-gradient(180deg, rgba(24,18,27,.88), rgba(14,10,16,.92));
      border:1px solid var(--line);
      box-shadow:var(--shadow);
      backdrop-filter:blur(16px);
    }
    .soft-border{
      border:1px solid rgba(255,255,255,.08);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    }
    .glow-border{
      position:relative;
    }
    .glow-border::before{
      content:"";
      position:absolute;
      inset:-1px;
      border-radius:inherit;
      padding:1px;
      background:linear-gradient(135deg, rgba(255,86,120,.62), rgba(255,200,94,.38), rgba(142,92,255,.28));
      -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
      -webkit-mask-composite:xor;
      mask-composite:exclude;
      pointer-events:none;
      opacity:.75;
    }
    .hero-panel{
      background:
        radial-gradient(800px circle at 18% 12%, rgba(255,86,120,.18), transparent 40%),
        radial-gradient(700px circle at 78% 24%, rgba(255,200,94,.18), transparent 32%),
        linear-gradient(180deg, rgba(22,16,23,.9), rgba(11,8,12,.96));
    }
    .section-title{
      letter-spacing:.02em;
    }
    .muted{color:var(--muted)}
    .soft{color:var(--soft)}
    .badge{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding:.38rem .7rem;
      border-radius:999px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
      color:#F4E9EF;
      font-size:.82rem;
      line-height:1;
    }
    .badge-hot{
      background:linear-gradient(135deg, rgba(255,86,120,.22), rgba(255,200,94,.18));
      border-color:rgba(255,158,120,.32);
      color:#fff;
    }
    .badge-violet{
      background:linear-gradient(135deg, rgba(142,92,255,.2), rgba(255,86,120,.12));
      border-color:rgba(142,92,255,.28);
    }
    .btn-primary{
      background:linear-gradient(135deg, #FF5678 0%, #FF7F5C 48%, #FFC85E 100%);
      color:#1A0F13;
      box-shadow:0 14px 30px rgba(255,86,120,.22);
    }
    .btn-primary:hover{
      transform:translateY(-1px);
      box-shadow:0 18px 36px rgba(255,86,120,.28);
    }
    .btn-secondary{
      background:rgba(255,255,255,.04);
      color:var(--text);
      border:1px solid rgba(255,255,255,.12);
    }
    .btn-secondary:hover{
      border-color:rgba(255,200,94,.38);
      background:rgba(255,255,255,.06);
      box-shadow:0 0 0 4px rgba(255,200,94,.06);
      transform:translateY(-1px);
    }
    .nav-link{
      color:#ECDDDF;
      padding:.5rem .8rem;
      border-radius:999px;
      border:1px solid transparent;
    }
    .nav-link:hover{
      background:rgba(255,255,255,.04);
      border-color:rgba(255,255,255,.08);
      color:#fff;
    }
    .nav-link.active{
      background:linear-gradient(135deg, rgba(255,86,120,.18), rgba(255,200,94,.12));
      border-color:rgba(255,160,120,.34);
      color:#fff;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.44rem .76rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
      color:#F5EAF0;
      font-size:.84rem;
      white-space:nowrap;
    }
    .chip:hover{
      border-color:rgba(255,200,94,.34);
      background:rgba(255,255,255,.05);
      transform:translateY(-1px);
    }
    .stat-tile{
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.08);
    }
    .card{
      background:linear-gradient(180deg, rgba(23,16,25,.95), rgba(13,10,15,.96));
      border:1px solid rgba(255,255,255,.08);
      box-shadow:0 18px 60px rgba(0,0,0,.28);
      border-radius:var(--radius);
    }
    .card:hover{
      transform:translateY(-3px);
      border-color:rgba(255,200,94,.26);
      box-shadow:0 22px 70px rgba(0,0,0,.38);
    }
    .mini-card{
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
      border:1px solid rgba(255,255,255,.08);
      border-radius:20px;
    }
    .focus-ring:focus-visible{
      outline:none;
      box-shadow:0 0 0 4px rgba(255,86,120,.18);
      border-color:rgba(255,200,94,.42);
    }
    .faq details{
      background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
      border:1px solid rgba(255,255,255,.08);
      border-radius:20px;
      overflow:hidden;
    }
    .faq summary{
      cursor:pointer;
      list-style:none;
    }
    .faq summary::-webkit-details-marker{display:none}
    .faq details[open]{
      border-color:rgba(255,200,94,.26);
    }
    .footer-link{
      color:#D7C8D2;
    }
    .footer-link:hover{
      color:#fff;
    }
    .section-surface{
      position:relative;
      isolation:isolate;
    }
    .section-surface::before{
      content:"";
      position:absolute;
      inset:0;
      z-index:-1;
      background:
        radial-gradient(700px circle at 12% 0%, rgba(255,86,120,.10), transparent 40%),
        radial-gradient(700px circle at 88% 0%, rgba(255,200,94,.08), transparent 36%);
      opacity:.9;
    }
    .progress-ring{
      width:120px;
      height:120px;
      display:block;
      margin:auto;
      filter:drop-shadow(0 8px 18px rgba(255,86,120,.16));
    }
    .line-clamp-2{
      display:-webkit-box;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:2;
      overflow:hidden;
    }
    .line-clamp-3{
      display:-webkit-box;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:3;
      overflow:hidden;
    }
    @media (max-width: 768px){
      .nav-link{padding:.48rem .7rem}
    }

/* roulang page: category2 */
:root{
      --bg:#09070A;
      --bg-2:#141015;
      --bg-3:#211018;
      --panel:rgba(255,255,255,.055);
      --panel-strong:rgba(255,255,255,.085);
      --text:#fff7f8;
      --muted:rgba(255,255,255,.62);
      --weak:rgba(255,255,255,.42);
      --line:rgba(255,255,255,.11);
      --line-strong:rgba(255,255,255,.18);
      --rose:#FF5678;
      --coral:#FF7F5C;
      --amber:#FFC85E;
      --violet:#A78BFA;
      --radius-xl:28px;
      --radius-lg:22px;
      --shadow:0 24px 80px rgba(0,0,0,.42);
      --glow:0 0 42px rgba(255,86,120,.18);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      min-height:100vh;
      color:var(--text);
      background:
        radial-gradient(circle at 16% 4%, rgba(255,86,120,.22), transparent 34%),
        radial-gradient(circle at 82% 2%, rgba(255,200,94,.16), transparent 30%),
        radial-gradient(circle at 50% 42%, rgba(167,139,250,.10), transparent 38%),
        linear-gradient(180deg,#09070A 0%,#141015 42%,#09070A 100%);
      font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
      line-height:1.75;
      overflow-x:hidden;
    }
    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.36;
      background-image:
        linear-gradient(115deg, transparent 0 26%, rgba(255,255,255,.045) 27%, transparent 29% 100%),
        radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
      background-size:100% 100%, 28px 28px;
      mix-blend-mode:screen;
      z-index:0;
    }
    a{color:inherit;text-decoration:none}
    button,input,select,textarea{font:inherit}
    input,select,textarea{outline:none}
    .focus-ring:focus-visible{
      outline:3px solid rgba(255,200,94,.72);
      outline-offset:3px;
    }
    .nav-link{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      border:1px solid transparent;
      border-radius:999px;
      padding:.55rem .9rem;
      color:rgba(255,255,255,.66);
      transition:all .2s ease;
    }
    .nav-link:hover{
      color:#fff;
      background:rgba(255,255,255,.07);
      border-color:rgba(255,255,255,.12);
    }
    .nav-link.active{
      color:#180E12;
      background:linear-gradient(135deg,var(--rose),var(--coral),var(--amber));
      box-shadow:0 10px 32px rgba(255,86,120,.18);
      font-weight:800;
    }
    .btn-primary{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.45rem;
      color:#1b0d10;
      background:linear-gradient(135deg,var(--rose),var(--coral),var(--amber));
      box-shadow:0 18px 42px rgba(255,86,120,.22);
      transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
    }
    .btn-primary:hover{transform:translateY(-2px);filter:saturate(1.08);box-shadow:0 24px 60px rgba(255,127,92,.25)}
    .btn-primary:active{transform:translateY(0)}
    .btn-secondary{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.45rem;
      border:1px solid rgba(255,255,255,.14);
      color:#fff;
      background:rgba(255,255,255,.055);
      transition:all .2s ease;
    }
    .btn-secondary:hover{
      border-color:rgba(255,200,94,.42);
      background:rgba(255,255,255,.09);
      box-shadow:0 0 32px rgba(255,200,94,.11);
      transform:translateY(-2px);
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      padding:.38rem .72rem;
      font-size:12px;
      line-height:1;
      color:rgba(255,255,255,.76);
      background:rgba(255,255,255,.06);
      white-space:nowrap;
    }
    .badge-hot{
      border-color:rgba(255,127,92,.28);
      background:rgba(255,86,120,.12);
      color:#ffd6dd;
    }
    .badge-violet{
      border-color:rgba(167,139,250,.28);
      background:rgba(167,139,250,.12);
      color:#ded5ff;
    }
    .badge-gold{
      border-color:rgba(255,200,94,.28);
      background:rgba(255,200,94,.12);
      color:#ffe7ad;
    }
    .section-wrap{position:relative;z-index:1}
    .poster-panel{
      border:1px solid var(--line);
      background:
        linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035)),
        radial-gradient(circle at 10% 0%,rgba(255,86,120,.16),transparent 36%);
      box-shadow:var(--shadow);
      border-radius:var(--radius-xl);
    }
    .card{
      border:1px solid var(--line);
      background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
      border-radius:var(--radius-lg);
      transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease;
    }
    .card:hover{
      transform:translateY(-4px);
      border-color:rgba(255,200,94,.28);
      box-shadow:0 22px 60px rgba(0,0,0,.36),0 0 40px rgba(255,86,120,.12);
      background:linear-gradient(180deg,rgba(255,255,255,.095),rgba(255,255,255,.045));
    }
    .stage-hero{
      position:relative;
      overflow:hidden;
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .stage-hero:before{
      content:"";
      position:absolute;
      inset:-20% -10% auto -10%;
      height:520px;
      background:
        radial-gradient(ellipse at 50% 0%, rgba(255,200,94,.20), transparent 55%),
        radial-gradient(ellipse at 20% 22%, rgba(255,86,120,.20), transparent 44%),
        radial-gradient(ellipse at 80% 18%, rgba(167,139,250,.14), transparent 42%);
      pointer-events:none;
    }
    .search-box{
      border:1px solid rgba(255,255,255,.14);
      background:rgba(9,7,10,.68);
      box-shadow:0 20px 70px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
    }
    .filter-pill{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border:1px solid rgba(255,255,255,.11);
      border-radius:999px;
      background:rgba(255,255,255,.045);
      padding:.58rem .95rem;
      color:rgba(255,255,255,.72);
      transition:all .18s ease;
      white-space:nowrap;
      font-size:14px;
    }
    .filter-pill:hover,.filter-pill.active{
      color:#fff;
      border-color:rgba(255,127,92,.35);
      background:rgba(255,86,120,.13);
    }
    .scene-card{
      position:relative;
      overflow:hidden;
      min-height:260px;
    }
    .scene-card:after{
      content:"";
      position:absolute;
      inset:auto -20% -40% -20%;
      height:180px;
      background:radial-gradient(ellipse at 50% 50%,rgba(255,86,120,.18),transparent 60%);
      pointer-events:none;
    }
    .list-row{
      display:grid;
      grid-template-columns:1fr auto;
      gap:1.25rem;
      align-items:center;
      border:1px solid rgba(255,255,255,.1);
      border-radius:22px;
      padding:1.1rem;
      background:rgba(255,255,255,.045);
      transition:all .2s ease;
    }
    .list-row:hover{
      border-color:rgba(255,200,94,.24);
      background:rgba(255,255,255,.07);
      transform:translateX(3px);
    }
    .timeline-dot{
      width:38px;height:38px;border-radius:14px;
      display:flex;align-items:center;justify-content:center;
      color:#180E12;font-weight:900;
      background:linear-gradient(135deg,var(--rose),var(--amber));
      box-shadow:0 0 28px rgba(255,127,92,.22);
      flex:none;
    }
    .faq-item{
      border:1px solid rgba(255,255,255,.1);
      border-radius:22px;
      background:rgba(255,255,255,.045);
      overflow:hidden;
      transition:border-color .2s ease,background .2s ease;
    }
    .faq-item:hover{border-color:rgba(255,200,94,.25);background:rgba(255,255,255,.065)}
    .faq-question{
      width:100%;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:1rem;
      padding:1.2rem 1.3rem;
      text-align:left;
      color:#fff;
      font-weight:800;
    }
    .faq-answer{
      display:none;
      padding:0 1.3rem 1.25rem;
      color:rgba(255,255,255,.62);
      line-height:1.8;
    }
    .faq-item.open .faq-answer{display:block}
    .faq-item.open .faq-icon{transform:rotate(45deg)}
    .faq-icon{transition:transform .18s ease}
    .footer-link{
      color:rgba(255,255,255,.58);
      transition:color .18s ease,transform .18s ease;
      display:inline-flex;
    }
    .footer-link:hover{color:#fff;transform:translateX(2px)}
    .mobile-menu{
      display:none;
      border-top:1px solid rgba(255,255,255,.1);
      background:rgba(9,7,10,.96);
    }
    .mobile-menu.open{display:block}
    @media (max-width:1024px){
      .list-row{grid-template-columns:1fr}
    }
    @media (max-width:768px){
      .stage-hero:before{height:430px}
      .poster-panel{border-radius:24px}
      .card{border-radius:20px}
      .filter-scroll{overflow-x:auto;padding-bottom:.25rem}
    }
    @media (max-width:520px){
      .btn-primary,.btn-secondary{width:100%}
      .list-row{padding:1rem}
      .faq-question{padding:1rem}
      .faq-answer{padding:0 1rem 1rem}
    }

/* roulang page: category1 */
:root{
      color-scheme: dark;
    }
    html{
      scroll-behavior:smooth;
    }
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
      background:#09070A;
      color:#fff;
      letter-spacing:0;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:-2;
      background:
        linear-gradient(120deg, rgba(255,86,120,.12), transparent 34%),
        linear-gradient(300deg, rgba(255,200,94,.10), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,.03), transparent 18%, transparent 82%, rgba(255,255,255,.02));
    }
    body::after{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:-1;
      background:
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.02) 1px, transparent 1px);
      background-size: 78px 78px, 78px 78px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.25) 72%, transparent);
      opacity:.35;
    }
    *{
      box-sizing:border-box;
    }
    a{
      text-decoration:none;
    }
    img{
      display:block;
      max-width:100%;
    }
    summary{
      list-style:none;
    }
    summary::-webkit-details-marker{
      display:none;
    }
    .focus-ring{
      outline:none;
    }
    .focus-ring:focus-visible{
      box-shadow:0 0 0 3px rgba(255,127,92,.22), 0 0 0 7px rgba(255,127,92,.12);
      border-color:rgba(255,127,92,.5) !important;
    }
    .panel{
      border-radius:24px;
      border:1px solid rgba(255,255,255,.10);
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      box-shadow:0 18px 50px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04);
      backdrop-filter:blur(14px);
      transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .panel:hover{
      transform:translateY(-2px);
      border-color:rgba(255,127,92,.28);
      box-shadow:0 22px 60px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.05);
    }
    .panel-strong{
      background:linear-gradient(180deg, rgba(255,86,120,.12), rgba(255,255,255,.03));
    }
    .btn-primary{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      border-radius:9999px;
      padding:.95rem 1.35rem;
      font-weight:700;
      color:#180E12;
      background:linear-gradient(135deg, #FF5678 0%, #FF7F5C 52%, #FFC85E 100%);
      box-shadow:0 14px 34px rgba(255,127,92,.24);
      transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
    }
    .btn-primary:hover{
      transform:translateY(-1px);
      filter:saturate(1.08);
      box-shadow:0 18px 40px rgba(255,127,92,.30);
    }
    .btn-secondary{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      border-radius:9999px;
      padding:.95rem 1.35rem;
      font-weight:700;
      color:#fff;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.05);
      transition:transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
    }
    .btn-secondary:hover{
      transform:translateY(-1px);
      border-color:rgba(255,127,92,.32);
      background:rgba(255,255,255,.08);
      box-shadow:0 12px 26px rgba(0,0,0,.18);
    }
    .nav-link{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.4rem;
      white-space:nowrap;
      border-radius:9999px;
      padding:.66rem 1rem;
      border:1px solid transparent;
      background:rgba(255,255,255,.04);
      color:rgba(255,255,255,.76);
      transition:transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
    }
    .nav-link:hover{
      transform:translateY(-1px);
      color:#fff;
      border-color:rgba(255,255,255,.12);
      background:rgba(255,255,255,.07);
    }
    .nav-link.active{
      color:#180E12;
      border-color:transparent;
      background:linear-gradient(135deg, #FF5678 0%, #FF7F5C 52%, #FFC85E 100%);
      box-shadow:0 10px 26px rgba(255,127,92,.22);
    }
    .footer-link{
      color:rgba(255,255,255,.58);
      transition:color .2s ease, transform .2s ease;
    }
    .footer-link:hover{
      color:#fff;
    }
    .badge-hot,
    .badge-violet,
    .badge-soft{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      border-radius:9999px;
      padding:.4rem .75rem;
      font-size:12px;
      font-weight:700;
      line-height:1;
      letter-spacing:.02em;
      border:1px solid rgba(255,255,255,.10);
    }
    .badge-hot{
      color:#180E12;
      background:linear-gradient(135deg, #FF5678 0%, #FF7F5C 52%, #FFC85E 100%);
      box-shadow:0 10px 20px rgba(255,127,92,.18);
    }
    .badge-violet{
      color:#F7D8E1;
      background:rgba(100,54,92,.35);
    }
    .badge-soft{
      color:rgba(255,255,255,.72);
      background:rgba(255,255,255,.05);
    }
    .field{
      width:100%;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.05);
      color:#fff;
      padding:.92rem 1rem;
      transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .field::placeholder{
      color:rgba(255,255,255,.38);
    }
    .field:focus{
      outline:none;
      border-color:rgba(255,127,92,.5);
      box-shadow:0 0 0 4px rgba(255,127,92,.12);
      background:rgba(255,255,255,.07);
    }
    .field textarea{
      resize:vertical;
    }
    details[open] .faq-icon{
      transform:rotate(45deg);
    }