/* roulang page: index */
:root{
      --bg:#090c12;
      --bg-2:#0d121b;
      --panel:#101723;
      --panel-2:#0d1420;
      --line:rgba(255,255,255,.09);
      --line-2:rgba(97,240,214,.22);
      --text:#e7eef7;
      --muted:#92a2b5;
      --muted-2:#6f8197;
      --accent:#61f0d6;
      --accent-2:#d86bff;
      --accent-3:#84b8ff;
      --radius:24px;
      --shadow:0 24px 70px rgba(0,0,0,.52);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      background:
        radial-gradient(circle at 18% 18%, rgba(97,240,214,.10), transparent 28%),
        radial-gradient(circle at 82% 8%, rgba(216,107,255,.10), transparent 22%),
        radial-gradient(circle at 72% 72%, rgba(132,184,255,.08), transparent 24%),
        linear-gradient(180deg, #090c12 0%, #0b1018 42%, #090c12 100%);
      font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
      line-height:1.6;
      text-rendering:optimizeLegibility;
      -webkit-font-smoothing:antialiased;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px),
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.05), transparent 18%);
      background-size: 22px 22px, 22px 22px, 100% 100%;
      opacity:.45;
      mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,1));
    }
    ::selection{background:rgba(97,240,214,.26); color:#fff}
    a{color:inherit; text-decoration:none}
    img{max-width:100%; display:block}
    button,input,select,textarea{font:inherit}
    .container-page{
      width:min(1200px, calc(100% - 1.25rem));
      margin-inline:auto;
    }
    .card-shell{
      background: linear-gradient(180deg, rgba(16,23,35,.92), rgba(10,15,24,.92));
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      backdrop-filter: blur(16px);
    }
    .card-hover{
      transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
    }
    .card-hover:hover{
      transform: translateY(-3px);
      border-color: rgba(97,240,214,.36);
      box-shadow: 0 22px 56px rgba(0,0,0,.46);
    }
    .nav-link{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.7rem .95rem;
      border-radius:999px;
      color:#dce7f4;
      font-size:.94rem;
      line-height:1;
      transition: all .22s ease;
      border:1px solid transparent;
    }
    .nav-link:hover{
      background: rgba(255,255,255,.05);
      border-color: rgba(255,255,255,.08);
      color:#fff;
    }
    .nav-link.active{
      background: linear-gradient(135deg, rgba(97,240,214,.16), rgba(216,107,255,.12));
      border-color: rgba(97,240,214,.22);
      color:#fff;
      box-shadow: 0 0 0 1px rgba(97,240,214,.08) inset;
    }
    .btn-primary{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      padding:.9rem 1.1rem;
      border-radius:999px;
      font-weight:700;
      color:#04111a;
      background: linear-gradient(135deg, var(--accent), #a0f6ff);
      box-shadow: 0 14px 28px rgba(97,240,214,.18);
      transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
      border:1px solid rgba(255,255,255,.18);
    }
    .btn-primary:hover{
      transform: translateY(-1px);
      filter:saturate(1.06);
      box-shadow: 0 18px 34px rgba(97,240,214,.28);
    }
    .btn-secondary{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      padding:.9rem 1.1rem;
      border-radius:999px;
      font-weight:700;
      color:#eaf4ff;
      background: rgba(255,255,255,.045);
      border:1px solid rgba(255,255,255,.12);
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
    }
    .btn-secondary:hover{
      transform: translateY(-1px);
      background: rgba(255,255,255,.07);
      border-color: rgba(97,240,214,.24);
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.38rem .7rem;
      border-radius:999px;
      font-size:.78rem;
      line-height:1;
      color:#dffdf7;
      background: rgba(97,240,214,.09);
      border:1px solid rgba(97,240,214,.2);
    }
    .badge-soft{
      color:#dbe8ff;
      background: rgba(132,184,255,.1);
      border-color: rgba(132,184,255,.18);
    }
    .badge-pink{
      color:#ffdff9;
      background: rgba(216,107,255,.1);
      border-color: rgba(216,107,255,.18);
    }
    .section-title{
      font-size: clamp(1.3rem, 2vw, 1.9rem);
      line-height:1.1;
      letter-spacing:-.02em;
      font-weight:800;
    }
    .section-desc{
      color: var(--muted);
      max-width: 62ch;
    }
    .poster-track{
      scroll-snap-type: x proximity;
      scrollbar-width: thin;
      scrollbar-color: rgba(255,255,255,.18) transparent;
      overflow-x:auto;
      overflow-y:hidden;
    }
    .poster-track::-webkit-scrollbar{height:10px}
    .poster-track::-webkit-scrollbar-track{background:transparent}
    .poster-track::-webkit-scrollbar-thumb{
      border-radius:999px;
      background: linear-gradient(90deg, rgba(97,240,214,.52), rgba(216,107,255,.48));
    }
    .mask-edge-left,
    .mask-edge-right{
      position:absolute;
      top:0;
      width:3rem;
      height:100%;
      pointer-events:none;
      z-index:10;
    }
    .mask-edge-left{left:0;background:linear-gradient(90deg, #090c12 0%, rgba(9,12,18,0) 100%)}
    .mask-edge-right{right:0;background:linear-gradient(270deg, #090c12 0%, rgba(9,12,18,0) 100%)}
    .input-shell{
      display:flex;
      align-items:center;
      gap:.65rem;
      padding:.72rem .95rem;
      border-radius:999px;
      background: rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.1);
      color:#eef6ff;
      transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
    }
    .input-shell:focus-within{
      border-color: rgba(97,240,214,.34);
      background: rgba(255,255,255,.06);
      box-shadow: 0 0 0 4px rgba(97,240,214,.08);
    }
    .input-shell input{
      width:100%;
      outline:none;
      border:0;
      background:transparent;
      color:var(--text);
      min-width: 0;
    }
    .input-shell input::placeholder{color:#7e90a8}
    .kbd{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:.18rem .42rem;
      border-radius:.45rem;
      border:1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.05);
      color:#ced9e9;
      font-size:.74rem;
      line-height:1;
      white-space:nowrap;
    }
    .glass-divider{
      height:1px;
      background: linear-gradient(90deg, transparent, rgba(97,240,214,.3), rgba(216,107,255,.22), transparent);
    }
    details > summary{list-style:none}
    details > summary::-webkit-details-marker{display:none}
    .faq-item[open]{
      border-color: rgba(97,240,214,.28);
      box-shadow: 0 16px 34px rgba(0,0,0,.2);
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.4rem .72rem;
      border-radius:999px;
      font-size:.82rem;
      color:#dbe8f5;
      border:1px solid rgba(255,255,255,.1);
      background: rgba(255,255,255,.04);
      transition: all .2s ease;
    }
    .chip:hover{
      transform: translateY(-1px);
      border-color: rgba(97,240,214,.24);
      background: rgba(97,240,214,.06);
    }
    .poster-card{
      position:relative;
      overflow:hidden;
      min-height: 100%;
      border-radius: 22px;
      border:1px solid rgba(255,255,255,.08);
      background:
        radial-gradient(circle at 20% 20%, rgba(97,240,214,.18), transparent 35%),
        radial-gradient(circle at 85% 15%, rgba(216,107,255,.16), transparent 32%),
        linear-gradient(180deg, rgba(18,24,35,.96), rgba(10,14,21,.98));
      box-shadow: 0 16px 36px rgba(0,0,0,.35);
    }
    .poster-card::after{
      content:"";
      position:absolute;
      inset:auto 0 0 0;
      height:34%;
      background: linear-gradient(180deg, rgba(9,12,18,0) 0%, rgba(9,12,18,.88) 100%);
      pointer-events:none;
    }
    .tiny-grid{
      display:grid;
      gap:.75rem;
      grid-template-columns: repeat(2, minmax(0,1fr));
    }
    .mini-box{
      border-radius: 18px;
      border:1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.04);
      padding: .9rem;
      transition: transform .2s ease, border-color .2s ease;
    }
    .mini-box:hover{
      transform: translateY(-2px);
      border-color: rgba(97,240,214,.2);
    }
    .count-pill{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.5rem .8rem;
      border-radius:999px;
      background: rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.09);
      color:#d6e4f7;
      font-size:.9rem;
    }
    .glow-line{
      height:1px;
      background: linear-gradient(90deg, rgba(97,240,214,.0), rgba(97,240,214,.55), rgba(216,107,255,.42), rgba(97,240,214,.0));
    }
    @media (max-width: 768px){
      .section-title{font-size:1.35rem}
    }

/* roulang page: category1 */
:root{
  --bg:#07111d;
  --bg-2:#0b1424;
  --panel:#0f1728cc;
  --panel-2:#111c31;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(103,232,249,.18);
  --text:#f5f7fb;
  --muted:#94a3b8;
  --muted-2:#64748b;
  --brand:#22d3ee;
  --brand-2:#f472b6;
  --brand-3:#8b5cf6;
  --radius:22px;
  --radius-sm:16px;
  --radius-lg:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(139,92,246,.20), transparent 26%),
    radial-gradient(circle at top right, rgba(34,211,238,.16), transparent 24%),
    radial-gradient(circle at 50% 10%, rgba(244,114,182,.10), transparent 28%),
    linear-gradient(180deg, #050912 0%, #0a1020 42%, #07111d 100%);
  font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  line-height:1.7;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(circle at center, black 35%, transparent 100%);
  opacity:.25;
  z-index:0;
}
::selection{background:rgba(34,211,238,.24);color:#fff}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
kbd{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2rem;
  padding:.18rem .45rem;
  border-radius:.6rem;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:#cbd5e1;
  font-size:.76rem;
  line-height:1;
}
.container-page{
  width:min(1180px, calc(100% - 2rem));
  margin-inline:auto;
}
.site-shell{
  position:relative;
  z-index:1;
}
.glass{
  background:linear-gradient(180deg, rgba(9,15,27,.92), rgba(8,13,24,.82));
  backdrop-filter: blur(18px);
  border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 40px rgba(0,0,0,.28);
}
.nav-link{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.72rem 1rem;
  border-radius:999px;
  color:#cbd5e1;
  font-size:.92rem;
  transition: all .22s ease;
}
.nav-link:hover,
.nav-link:focus-visible{
  color:#fff;
  background:rgba(255,255,255,.05);
  outline:none;
}
.nav-link.active{
  color:#fff;
  background:linear-gradient(135deg, rgba(34,211,238,.17), rgba(139,92,246,.18));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 0 0 1px rgba(34,211,238,.14) inset;
}
.search-shell{
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.72rem .95rem;
  min-height:3rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(8,13,24,.72);
  color:#94a3b8;
  transition:all .2s ease;
}
.search-shell:focus-within{
  border-color:rgba(34,211,238,.34);
  box-shadow:0 0 0 4px rgba(34,211,238,.08);
  color:#e2e8f0;
}
.search-shell input{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:#f8fafc;
}
.search-shell input::placeholder{color:#64748b}
.btn-primary,
.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.9rem 1.25rem;
  border-radius:999px;
  border:1px solid transparent;
  font-weight:700;
  letter-spacing:.01em;
  transition: all .22s ease;
}
.btn-primary{
  color:#041018;
  background:linear-gradient(135deg, #67e8f9, #f472b6);
  box-shadow: 0 10px 30px rgba(34,211,238,.18);
}
.btn-secondary{
  color:#e2e8f0;
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.08);
}
.btn-primary:hover,
.btn-secondary:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 34px rgba(0,0,0,.22);
}
.btn-secondary:hover{
  background:rgba(255,255,255,.07);
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.34rem .68rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:#cbd5e1;
  font-size:.8rem;
}
.section-title{
  font-size: clamp(1.3rem, 1.1rem + 1vw, 2rem);
  line-height:1.15;
  letter-spacing:-.02em;
}
.section-subtitle{
  color:var(--muted);
  max-width:60ch;
}
.card{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(17,28,49,.86), rgba(10,16,32,.78));
  box-shadow: 0 16px 50px rgba(0,0,0,.22);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.card:hover{
  transform: translateY(-3px);
  border-color: rgba(34,211,238,.22);
  box-shadow: 0 24px 64px rgba(0,0,0,.3);
}
.card::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(34,211,238,.55), transparent);
  opacity:.65;
}
.hero-panel{
  background:
    radial-gradient(circle at top left, rgba(34,211,238,.18), transparent 36%),
    radial-gradient(circle at bottom right, rgba(244,114,182,.14), transparent 34%),
    linear-gradient(180deg, rgba(11,18,32,.94), rgba(7,11,20,.96));
}
.poster{
  position:relative;
  aspect-ratio:3/4;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 20% 20%, rgba(103,232,249,.34), transparent 28%),
    radial-gradient(circle at 80% 30%, rgba(244,114,182,.22), transparent 24%),
    linear-gradient(160deg, #182238 0%, #0f1728 52%, #08101b 100%);
  box-shadow: 0 14px 42px rgba(0,0,0,.32);
}
.poster::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 0%, rgba(3,8,20,.15) 45%, rgba(3,8,20,.76) 100%);
}
.poster::after{
  content:"";
  position:absolute;
  inset:-35% -10% auto;
  height:62%;
  background:linear-gradient(135deg, rgba(255,255,255,.12), transparent 55%);
  transform:rotate(-12deg);
}
.poster-content{
  position:absolute;
  inset:auto 0 0 0;
  padding:1rem;
  z-index:1;
}
.tag{
  display:inline-flex;
  align-items:center;
  gap:.32rem;
  padding:.25rem .55rem;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
  color:#e2e8f0;
  font-size:.72rem;
}
.scrollbar-hide::-webkit-scrollbar{height:0;width:0}
.scrollbar-hide{scrollbar-width:none;-ms-overflow-style:none}
.ring-line{
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), rgba(34,211,238,.34), rgba(255,255,255,.12), transparent);
}
.faq details{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  overflow:hidden;
}
.faq summary{
  cursor:pointer;
  list-style:none;
  padding:1rem 1.1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  font-weight:600;
}
.faq summary::-webkit-details-marker{display:none}
.faq details[open]{
  border-color:rgba(34,211,238,.24);
  box-shadow:0 0 0 1px rgba(34,211,238,.08) inset;
}
.faq .faq-body{
  padding:0 1.1rem 1rem;
  color:#cbd5e1;
}
.mini-scroll{
  overflow-x:auto;
  padding-bottom:.35rem;
  scroll-snap-type:x proximity;
}
.mini-scroll > *{
  scroll-snap-align:start;
}
@media (max-width: 1024px){
  .desktop-nav{display:none}
}
@media (max-width: 640px){
  .container-page{width:min(100% - 1rem, 1180px)}
  .mobile-stack{flex-direction:column}
}