/* roulang page: index */
:root{
      --bg:#fbf6f1;
      --panel:#fffdfb;
      --panel-2:#fdf7f4;
      --text:#24131d;
      --muted:#6f5f69;
      --line:#eadfd8;
      --brand-1:#7c1f46;
      --brand-2:#a53d72;
      --brand-3:#d76d90;
      --brand-4:#f0a2b8;
      --glow:rgba(124,31,70,.16);
      --shadow:0 18px 50px rgba(68,18,34,.10);
      --shadow-strong:0 24px 70px rgba(68,18,34,.18);
      --radius-xl:28px;
      --radius-lg:22px;
      --radius-md:18px;
      --radius-sm:14px;
    }
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      background:
        radial-gradient(circle at 10% 10%, rgba(213,108,141,.15), transparent 30%),
        radial-gradient(circle at 85% 15%, rgba(124,31,70,.12), transparent 26%),
        linear-gradient(180deg, #fffdfa 0%, var(--bg) 38%, #fbf4ef 100%);
      font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
      line-height:1.7;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }
    *{box-sizing:border-box}
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input{font:inherit}
    ::selection{background:var(--brand-2);color:#fff}
    .shell{position:relative}
    .desktop-sidebar{
      width:110px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,248,244,.96)),
        linear-gradient(180deg, var(--panel), var(--panel-2));
      border-right:1px solid rgba(234,223,216,.9);
      box-shadow: 12px 0 40px rgba(66,18,35,.05);
      backdrop-filter: blur(14px);
    }
    .sidebar-brand{
      background:linear-gradient(135deg, var(--brand-1), var(--brand-2) 55%, var(--brand-3));
      box-shadow:0 14px 30px rgba(124,31,70,.22);
    }
    .sidebar-link{
      position:relative;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:8px;
      padding:14px 10px;
      border-radius:18px;
      color:var(--muted);
      border:1px solid transparent;
      transition:all .22s ease;
    }
    .sidebar-link:hover{
      transform:translateY(-2px);
      color:var(--text);
      background:rgba(255,255,255,.75);
      border-color:rgba(214,196,190,.9);
      box-shadow:0 10px 24px rgba(64,16,33,.08);
    }
    .sidebar-link.active{
      color:#fff;
      background:linear-gradient(135deg, var(--brand-1), var(--brand-2) 58%, var(--brand-3));
      box-shadow:0 16px 36px rgba(124,31,70,.24);
      border-color:transparent;
    }
    .sidebar-link .mark{
      width:42px;
      height:42px;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:rgba(255,255,255,.88);
      color:var(--brand-1);
      font-weight:800;
      transition:inherit;
    }
    .sidebar-link.active .mark{
      background:rgba(255,255,255,.16);
      color:#fff;
    }
    .sidebar-link span:last-child{
      font-size:12px;
      line-height:1.1;
      letter-spacing:.02em;
      text-align:center;
    }
    .mobile-bar{
      background:rgba(255,255,255,.84);
      backdrop-filter:blur(14px);
      border-bottom:1px solid rgba(234,223,216,.95);
      box-shadow:0 8px 30px rgba(64,16,33,.06);
    }
    .mobile-chip{
      border:1px solid rgba(214,196,190,.95);
      background:rgba(255,255,255,.82);
      color:var(--muted);
      border-radius:999px;
      padding:.55rem .95rem;
      white-space:nowrap;
      transition:all .2s ease;
    }
    .mobile-chip:hover{
      color:var(--text);
      border-color:rgba(124,31,70,.25);
      box-shadow:0 12px 24px rgba(64,16,33,.08);
    }
    .mobile-chip.active{
      background:linear-gradient(135deg, var(--brand-1), var(--brand-2));
      color:#fff;
      border-color:transparent;
      box-shadow:0 10px 24px rgba(124,31,70,.2);
    }
    .panel{
      background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,251,248,.86));
      border:1px solid rgba(234,223,216,.92);
      box-shadow:var(--shadow);
      border-radius:var(--radius-xl);
    }
    .panel-soft{
      background:linear-gradient(180deg, rgba(255,252,250,.96), rgba(255,247,243,.96));
      border:1px solid rgba(234,223,216,.9);
      border-radius:var(--radius-lg);
      box-shadow:0 14px 40px rgba(68,18,34,.08);
    }
    .soft-line{
      background:linear-gradient(90deg, rgba(124,31,70,.18), rgba(124,31,70,0));
      height:1px;
    }
    .hero-orb{
      position:absolute;
      border-radius:999px;
      filter:blur(4px);
      pointer-events:none;
      opacity:.8;
    }
    .hero-orb.one{
      width:220px;height:220px;
      background:radial-gradient(circle, rgba(214,110,145,.28) 0%, rgba(214,110,145,0) 70%);
      top:-40px;right:-30px;
    }
    .hero-orb.two{
      width:180px;height:180px;
      background:radial-gradient(circle, rgba(124,31,70,.18) 0%, rgba(124,31,70,0) 72%);
      bottom:10px;left:8%;
    }
    .hero-grid-card{
      background:
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,248,244,.95));
      border:1px solid rgba(234,223,216,.92);
      border-radius:22px;
      box-shadow:0 12px 30px rgba(68,18,34,.08);
      transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .hero-grid-card:hover{
      transform:translateY(-3px);
      box-shadow:var(--shadow-strong);
      border-color:rgba(124,31,70,.18);
    }
    .hot-card{
      overflow:hidden;
      position:relative;
      background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,247,242,.96));
      border:1px solid rgba(234,223,216,.94);
      border-radius:24px;
      box-shadow:0 16px 40px rgba(68,18,34,.08);
      transition:all .2s ease;
    }
    .hot-card:hover{
      transform:translateY(-4px);
      box-shadow:0 22px 54px rgba(68,18,34,.14);
      border-color:rgba(124,31,70,.22);
    }
    .thumb{
      position:relative;
      height:180px;
      overflow:hidden;
      border-radius:20px;
      background:
        linear-gradient(135deg, rgba(124,31,70,.92), rgba(166,61,114,.84) 58%, rgba(215,109,144,.8)),
        linear-gradient(180deg, #8c254a, #da8aa6);
    }
    .thumb::before,
    .thumb::after{
      content:"";
      position:absolute;
      border-radius:999px;
      background:rgba(255,255,255,.15);
    }
    .thumb::before{width:140px;height:140px;right:-30px;top:-20px}
    .thumb::after{width:90px;height:90px;left:18px;bottom:18px}
    .tag{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.38rem .75rem;
      border-radius:999px;
      border:1px solid rgba(214,196,190,.88);
      background:rgba(255,255,255,.84);
      color:var(--muted);
      font-size:.82rem;
      line-height:1;
    }
    .tag.brand{
      background:linear-gradient(135deg, rgba(124,31,70,.10), rgba(214,108,141,.14));
      color:var(--brand-1);
      border-color:rgba(124,31,70,.12);
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.44rem .82rem;
      border-radius:999px;
      background:linear-gradient(135deg, rgba(124,31,70,.1), rgba(213,108,141,.16));
      color:var(--brand-1);
      border:1px solid rgba(124,31,70,.12);
      font-size:.84rem;
      line-height:1;
    }
    .btn-primary{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.5rem;
      padding:.9rem 1.2rem;
      border-radius:999px;
      color:#fff;
      background:linear-gradient(135deg, var(--brand-1), var(--brand-2) 55%, var(--brand-3));
      box-shadow:0 14px 28px rgba(124,31,70,.22);
      transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
    }
    .btn-primary:hover{
      transform:translateY(-2px);
      box-shadow:0 18px 34px rgba(124,31,70,.28);
      filter:saturate(1.04);
    }
    .btn-soft{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.5rem;
      padding:.9rem 1.2rem;
      border-radius:999px;
      background:rgba(255,255,255,.82);
      color:var(--text);
      border:1px solid rgba(214,196,190,.94);
      transition:all .2s ease;
    }
    .btn-soft:hover{
      transform:translateY(-2px);
      border-color:rgba(124,31,70,.22);
      box-shadow:0 14px 28px rgba(68,18,34,.08);
    }
    .input-lite{
      width:100%;
      background:rgba(255,255,255,.92);
      border:1px solid rgba(214,196,190,.92);
      color:var(--text);
      border-radius:999px;
      padding:.95rem 1.15rem;
      outline:none;
      transition:all .2s ease;
    }
    .input-lite:focus{
      border-color:rgba(124,31,70,.35);
      box-shadow:0 0 0 4px rgba(124,31,70,.08);
    }
    .section-title{
      letter-spacing:-.03em;
      color:var(--text);
    }
    .section-note{
      color:var(--muted);
    }
    .mini-list a{
      display:flex;
      align-items:flex-start;
      gap:.8rem;
      padding:.95rem 0;
      border-bottom:1px solid rgba(234,223,216,.72);
      transition:color .2s ease, transform .2s ease;
    }
    .mini-list a:hover{
      color:var(--brand-1);
      transform:translateX(2px);
    }
    .mini-list a:last-child{border-bottom:none}
    .mini-dot{
      width:10px;height:10px;border-radius:999px;
      background:linear-gradient(135deg, var(--brand-1), var(--brand-3));
      margin-top:.5rem;
      box-shadow:0 0 0 4px rgba(124,31,70,.07);
      flex:none;
    }
    .timeline{
      position:relative;
    }
    .timeline::before{
      content:"";
      position:absolute;
      left:18px;
      top:12px;
      bottom:12px;
      width:1px;
      background:linear-gradient(180deg, rgba(124,31,70,.22), rgba(124,31,70,0));
    }
    .timeline-item{
      position:relative;
      padding-left:52px;
    }
    .timeline-item::before{
      content:"";
      position:absolute;
      left:10px;
      top:6px;
      width:18px;height:18px;
      border-radius:999px;
      border:4px solid #fff;
      background:linear-gradient(135deg, var(--brand-1), var(--brand-3));
      box-shadow:0 8px 18px rgba(124,31,70,.18);
    }
    .review-track{
      scrollbar-width:none;
      -ms-overflow-style:none;
      scroll-behavior:smooth;
    }
    .review-track::-webkit-scrollbar{display:none}
    .review-card{
      background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,247,243,.96));
      border:1px solid rgba(234,223,216,.92);
      border-radius:24px;
      box-shadow:0 14px 34px rgba(68,18,34,.08);
      transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .review-card:hover{
      transform:translateY(-3px);
      box-shadow:0 18px 42px rgba(68,18,34,.12);
      border-color:rgba(124,31,70,.16);
    }
    .star{
      color:#d99641;
      letter-spacing:.08em;
    }
    .icon-box{
      width:52px;height:52px;
      border-radius:18px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, rgba(124,31,70,.12), rgba(213,108,141,.18));
      color:var(--brand-1);
      flex:none;
    }
    .faq-item{
      background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,248,245,.96));
      border:1px solid rgba(234,223,216,.92);
      border-radius:20px;
      overflow:hidden;
      box-shadow:0 12px 30px rgba(68,18,34,.06);
    }
    .faq-trigger{
      width:100%;
      text-align:left;
      padding:1rem 1.1rem;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      color:var(--text);
      background:transparent;
      border:none;
      cursor:pointer;
    }
    .faq-trigger:focus-visible{
      outline:none;
      box-shadow:0 0 0 4px rgba(124,31,70,.1);
    }
    .faq-answer{
      padding:0 1.1rem 1.1rem 1.1rem;
      color:var(--muted);
      display:none;
    }
    .faq-item.open .faq-answer{display:block}
    .faq-item.open .faq-chevron{transform:rotate(180deg)}
    .faq-chevron{
      transition:transform .2s ease;
      color:var(--brand-1);
      flex:none;
    }
    .cta-shell{
      background:
        radial-gradient(circle at top left, rgba(255,255,255,.18), transparent 35%),
        linear-gradient(135deg, #5d1836 0%, #80224a 42%, #ad4677 100%);
      box-shadow:0 24px 70px rgba(92,20,45,.22);
    }
    .footer-link{
      color:var(--muted);
      transition:color .2s ease, transform .2s ease;
    }
    .footer-link:hover{
      color:var(--brand-1);
      transform:translateY(-1px);
    }
    .back-top{
      background:rgba(255,255,255,.88);
      border:1px solid rgba(234,223,216,.92);
      box-shadow:0 14px 30px rgba(68,18,34,.08);
      color:var(--text);
      transition:all .2s ease;
    }
    .back-top:hover{
      transform:translateY(-2px);
      border-color:rgba(124,31,70,.22);
      box-shadow:0 18px 34px rgba(68,18,34,.12);
    }
    @media (max-width: 1023px){
      .desktop-sidebar{display:none}
    }
    @media (min-width: 1024px){
      .page-wrap{padding-left:110px}
    }

/* roulang page: category1 */
:root{
      --bg:#f7f1ee;
      --panel:rgba(255,255,255,.84);
      --panel-2:#fcf8f6;
      --text:#2a1b1e;
      --muted:#736568;
      --line:rgba(123,88,94,.14);
      --wine:#7d1f3e;
      --berry:#ac335f;
      --rose:#e06f93;
      --gold:#c79a67;
      --shadow-soft:0 14px 36px rgba(69, 25, 36, .10);
      --shadow-strong:0 24px 58px rgba(69, 25, 36, .16);
      --radius:26px;
    }
    html{scroll-behavior:smooth}
    body{
      color:var(--text);
      background:
        radial-gradient(circle at 4% 0%, rgba(172, 51, 95, .12), transparent 26%),
        radial-gradient(circle at 88% 8%, rgba(199, 154, 103, .12), transparent 22%),
        linear-gradient(180deg, #fbf8f7 0%, #f7f1ee 100%);
      overflow-x:hidden;
      font-family: "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
    }
    ::selection{background:rgba(172,51,95,.18); color:var(--text)}
    a,button,input,summary{transition:all .22s ease}
    a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
      outline:2px solid rgba(172,51,95,.45);
      outline-offset:3px;
    }
    .panel-soft{
      background:var(--panel);
      border:1px solid var(--line);
      box-shadow:var(--shadow-soft);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-radius:28px;
    }
    .panel-strong{
      background: linear-gradient(135deg, rgba(125,31,62,.98) 0%, rgba(172,51,95,.98) 52%, rgba(224,111,147,.96) 100%);
      box-shadow:var(--shadow-strong);
      border-radius:30px;
    }
    .sidebar-link{
      display:flex;
      align-items:center;
      gap:.75rem;
      border-radius:20px;
      border:1px solid transparent;
      padding:.9rem .9rem;
      font-size:.875rem;
      font-weight:800;
      line-height:1.15;
      color:var(--muted);
      background:rgba(255,255,255,.6);
      box-shadow:0 1px 0 rgba(255,255,255,.7) inset;
    }
    .sidebar-link .mark{
      display:grid;
      place-items:center;
      width:2rem;
      height:2rem;
      border-radius:14px;
      flex:none;
      color:#fff;
      font-size:.8rem;
      font-weight:900;
      letter-spacing:.02em;
      background:linear-gradient(135deg, var(--wine), var(--berry), var(--rose));
      box-shadow:0 8px 20px rgba(172,51,95,.26);
    }
    .sidebar-link:hover,
    .sidebar-link.active{
      color:#fff;
      background:linear-gradient(135deg, var(--wine), var(--berry), var(--rose));
      border-color:rgba(255,255,255,.08);
      box-shadow:0 18px 34px rgba(172,51,95,.25);
      transform:translateY(-1px);
    }
    .sidebar-link:hover .mark,
    .sidebar-link.active .mark{
      background:rgba(255,255,255,.18);
      box-shadow:none;
    }
    .footer-link{
      color:var(--muted);
      font-weight:700;
    }
    .footer-link:hover{color:var(--wine)}
    .back-top{
      color:#fff;
      background:linear-gradient(135deg, var(--wine), var(--berry), var(--rose));
      box-shadow:0 12px 26px rgba(172,51,95,.24);
    }
    .back-top:hover{transform:translateY(-1px); box-shadow:0 18px 30px rgba(172,51,95,.3)}
    .tag{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      border-radius:999px;
      border:1px solid rgba(125,31,62,.12);
      background:rgba(255,255,255,.76);
      padding:.44rem .78rem;
      font-size:.78rem;
      font-weight:800;
      color:var(--wine);
      line-height:1;
      box-shadow:0 6px 16px rgba(72, 27, 38, .06);
    }
    .tag-soft{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      border-radius:999px;
      border:1px solid rgba(123,88,94,.12);
      background:rgba(248,244,242,.92);
      padding:.44rem .78rem;
      font-size:.78rem;
      font-weight:700;
      color:var(--muted);
    }
    .action-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.5rem;
      border-radius:999px;
      padding:.9rem 1.15rem;
      font-weight:800;
      letter-spacing:.01em;
      box-shadow:0 12px 26px rgba(69, 25, 36, .08);
    }
    .action-primary{
      color:#fff;
      background:linear-gradient(135deg, var(--wine), var(--berry), var(--rose));
    }
    .action-primary:hover{transform:translateY(-1px); box-shadow:0 18px 34px rgba(172,51,95,.24)}
    .action-ghost{
      background:rgba(255,255,255,.82);
      border:1px solid var(--line);
      color:var(--text);
    }
    .action-ghost:hover{
      transform:translateY(-1px);
      border-color:rgba(172,51,95,.28);
      box-shadow:0 16px 28px rgba(69, 25, 36, .08);
    }
    .mini-stat{
      border-radius:24px;
      border:1px solid rgba(125,31,62,.1);
      background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(251,247,245,.92));
      box-shadow:0 10px 24px rgba(69,25,36,.06);
    }
    .mini-stat .num{
      font-size:1.55rem;
      font-weight:900;
      line-height:1;
      background:linear-gradient(135deg, var(--wine), var(--berry));
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }
    .grid-card{
      position:relative;
      overflow:hidden;
      border-radius:28px;
      border:1px solid rgba(125,31,62,.12);
      background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(250,246,244,.96));
      box-shadow:0 14px 34px rgba(69,25,36,.08);
      transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }
    .grid-card:hover{
      transform:translateY(-4px);
      box-shadow:0 22px 44px rgba(69,25,36,.12);
      border-color:rgba(172,51,95,.25);
    }
    .grid-card .thumb{
      position:relative;
      min-height:150px;
      overflow:hidden;
      border-radius:24px;
      background:
        radial-gradient(circle at 20% 15%, rgba(255,255,255,.28), transparent 28%),
        linear-gradient(135deg, rgba(125,31,62,.92), rgba(172,51,95,.92) 54%, rgba(224,111,147,.9));
    }
    .grid-card .thumb::after{
      content:"";
      position:absolute;
      inset:auto -12% -28% auto;
      width:160px;
      height:160px;
      border-radius:50%;
      background:rgba(255,255,255,.12);
      filter:blur(0);
    }
    .thumb-badge{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      border-radius:999px;
      background:rgba(255,255,255,.16);
      padding:.34rem .65rem;
      font-size:.74rem;
      font-weight:800;
      color:#fff;
      border:1px solid rgba(255,255,255,.18);
      backdrop-filter: blur(8px);
    }
    details.faq-item{
      border-radius:24px;
      border:1px solid rgba(123,88,94,.12);
      background:rgba(255,255,255,.78);
      box-shadow:0 10px 24px rgba(69,25,36,.05);
      overflow:hidden;
    }
    details.faq-item[open]{
      border-color:rgba(172,51,95,.22);
      box-shadow:0 16px 30px rgba(69,25,36,.08);
    }
    details.faq-item summary{
      list-style:none;
      cursor:pointer;
      padding:1rem 1.1rem;
      display:flex;
      align-items:flex-start;
      gap:.85rem;
      font-weight:800;
      color:var(--text);
    }
    details.faq-item summary::-webkit-details-marker{display:none}
    .faq-icon{
      width:1.9rem;
      height:1.9rem;
      border-radius:999px;
      display:grid;
      place-items:center;
      flex:none;
      background:linear-gradient(135deg, var(--wine), var(--berry));
      color:#fff;
      font-weight:900;
      box-shadow:0 10px 20px rgba(172,51,95,.18);
    }
    details.faq-item[open] .faq-icon{transform:rotate(45deg)}
    .faq-body{
      padding:0 1.1rem 1.05rem 3.95rem;
      color:var(--muted);
      font-size:.95rem;
      line-height:1.85;
    }
    .chip-scroll::-webkit-scrollbar{height:0}
    .chip-scroll{scrollbar-width:none}
    .review-row::-webkit-scrollbar{height:0}
    .review-row{scrollbar-width:none}
    .mobile-drawer{
      border-top:1px solid var(--line);
      background:rgba(255,255,255,.92);
      box-shadow:0 20px 40px rgba(69,25,36,.1);
    }
    .section-title{
      font-size:1.1rem;
      font-weight:900;
      letter-spacing:.01em;
      color:var(--text);
    }
    .section-note{
      font-size:.92rem;
      color:var(--muted);
      line-height:1.75;
    }
    .soft-divider{
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(123,88,94,.16), transparent);
    }