/* roulang page: index */
:root{
      --bg:#fbf7f8;
      --panel:rgba(255,255,255,.78);
      --panel-strong:rgba(255,255,255,.92);
      --text:#221621;
      --muted:#6e5c69;
      --line:#ead9e4;
      --brand:#e25a92;
      --brand2:#8f49f0;
      --brand3:#ff8b5c;
      --shadow:0 20px 60px rgba(114, 55, 93, .12);
      --radius:24px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      background:
        radial-gradient(1200px 420px at 15% -8%, rgba(226,90,146,.18), transparent 56%),
        radial-gradient(900px 380px at 92% 6%, rgba(143,73,240,.14), transparent 52%),
        radial-gradient(700px 300px at 50% 110%, rgba(255,139,92,.10), transparent 58%),
        linear-gradient(180deg, #fffdfd 0%, #fbf7f8 18%, #faf5f7 100%);
      font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:
        linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.45)),
        linear-gradient(135deg, rgba(255,255,255,.08) 25%, transparent 25%),
        linear-gradient(225deg, rgba(255,255,255,.08) 25%, transparent 25%),
        linear-gradient(45deg, rgba(255,255,255,.08) 25%, transparent 25%),
        linear-gradient(315deg, rgba(255,255,255,.08) 25%, transparent 25%);
      background-position: 0 0, 18px 18px, 18px 18px, 0 0, 0 0;
      background-size: auto, 36px 36px, 36px 36px, 36px 36px, 36px 36px;
      opacity:.22;
      mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 70%);
    }
    ::selection{background:rgba(226,90,146,.18); color:#1f101a;}
    a{color:inherit; text-decoration:none}
    img{max-width:100%; display:block}
    button,input,select,textarea{font:inherit}
    .shell{
      width:min(1180px, calc(100% - 32px));
      margin:0 auto;
    }
    .panel{
      background:var(--panel);
      backdrop-filter: blur(18px);
      border:1px solid rgba(255,255,255,.92);
      box-shadow:var(--shadow);
    }
    .panel-strong{
      background:var(--panel-strong);
      backdrop-filter: blur(18px);
      border:1px solid rgba(255,255,255,.95);
      box-shadow:var(--shadow);
    }
    .soft-border{border:1px solid var(--line);}
    .gradient-text{
      background:linear-gradient(120deg, #c93f7c 0%, #8f49f0 55%, #ff8b5c 100%);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }
    .mini-bar{
      height:10px;
      border-radius:999px;
      background:linear-gradient(90deg, rgba(226,90,146,.28), rgba(143,73,240,.22));
      overflow:hidden;
    }
    .mini-bar > span{
      display:block;
      height:100%;
      border-radius:inherit;
      background:linear-gradient(90deg, #e25a92 0%, #8f49f0 100%);
      box-shadow:0 8px 16px rgba(226,90,146,.2);
    }
    details > summary{
      list-style:none;
      cursor:pointer;
    }
    details > summary::-webkit-details-marker{display:none;}
    details[open]{
      border-color:rgba(226,90,146,.28);
      box-shadow:0 16px 40px rgba(114,55,93,.08);
    }
    .lift{
      transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease, background .24s ease;
    }
    .lift:hover{
      transform:translateY(-2px);
      box-shadow:0 22px 48px rgba(114,55,93,.14);
    }
    .tap{
      transition:transform .2s ease, box-shadow .2s ease, filter .2s ease, background .2s ease, border-color .2s ease;
    }
    .tap:hover{transform:translateY(-1px); filter:saturate(1.03);}
    .tap:active{transform:translateY(0);}
    .focus-ring:focus-visible{
      outline:none;
      box-shadow:0 0 0 4px rgba(226,90,146,.16), 0 0 0 1px rgba(226,90,146,.18);
    }
    .chip-active{
      background:linear-gradient(135deg, rgba(226,90,146,.14), rgba(143,73,240,.14));
      color:#a92c67;
      border-color:rgba(226,90,146,.22);
    }
    .nav-blur{
      background:rgba(255,255,255,.76);
      backdrop-filter: blur(18px);
    }
    .count-ring{
      background:conic-gradient(from 180deg, #e25a92 0 72%, #8f49f0 72% 88%, #ffd6c3 88% 100%);
    }
    .count-ring::after{
      content:"";
      position:absolute;
      inset:14px;
      border-radius:999px;
      background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.84));
    }
    .news-card[hidden]{display:none !important;}

/* roulang page: category1 */
:root{
      --ink:#1f1730;
      --muted:#6d6880;
      --line:rgba(107,79,137,.14);
      --bg:#faf7fc;
      --card:rgba(255,255,255,.84);
      --brand:#e24b8b;
      --plum:#8b5cf6;
      --sand:#f59e0b;
      --shadow:0 18px 50px rgba(56,24,76,.08);
      --shadow-glow:0 18px 60px rgba(226,75,139,.20);
      --radius:24px;
    }
    html{scroll-behavior:smooth}
    body{
      color:var(--ink);
      background:
        radial-gradient(1000px 500px at 8% 0%, rgba(226,75,139,.11), transparent 54%),
        radial-gradient(800px 500px at 92% 14%, rgba(139,92,246,.10), transparent 58%),
        linear-gradient(180deg, #fff 0%, var(--bg) 100%);
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:
        radial-gradient(rgba(255,255,255,.9) 0.7px, transparent 0.7px);
      background-size:18px 18px;
      opacity:.22;
      mix-blend-mode:soft-light;
    }
    .shell{
      width:min(1180px, calc(100% - 1.5rem));
      margin-inline:auto;
    }
    .soft-border{
      border:1px solid rgba(107,79,137,.12);
      box-shadow:var(--shadow);
      background:var(--card);
      backdrop-filter: blur(18px);
    }
    .shadow-glow{box-shadow:var(--shadow-glow)}
    .text-ink{color:var(--ink)}
    .border-line{border-color:var(--line)}
    .frost{
      background: rgba(255,255,255,.78);
      backdrop-filter: blur(18px);
    }
    .btn-flow{
      transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, opacity .2s ease;
    }
    .btn-flow:hover{transform:translateY(-1px)}
    .btn-flow:active{transform:translateY(0)}
    .focus-ring:focus-visible{
      outline:none;
      box-shadow:0 0 0 4px rgba(226,75,139,.16);
      border-color: rgba(226,75,139,.42);
    }
    .accordion-panel{
      max-height:0;
      overflow:hidden;
      transition:max-height .3s ease, opacity .3s ease;
      opacity:0;
    }
    .accordion-open .accordion-panel{
      opacity:1;
    }
    .menu-enter{
      animation: menuIn .2s ease-out;
    }
    @keyframes menuIn{
      from{opacity:0; transform:translateY(-6px)}
      to{opacity:1; transform:translateY(0)}
    }
    .pattern-line{
      background-image:
        linear-gradient(135deg, rgba(226,75,139,.12), rgba(139,92,246,.12)),
        linear-gradient(90deg, rgba(255,255,255,.8), rgba(255,255,255,.8));
    }