/* roulang page: index */
:root{
      --bg: #fff7fb;
      --bg-2: #fff1f7;
      --panel: rgba(255,255,255,.86);
      --panel-strong: rgba(255,255,255,.95);
      --text: #111827;
      --muted: #6b7280;
      --line: rgba(244, 215, 228, .95);
      --primary: #ff3e7f;
      --primary-2: #ff8a3d;
      --accent: #8b5cf6;
      --shadow: 0 22px 60px rgba(17, 24, 39, .08);
      --shadow-2: 0 14px 34px rgba(255, 62, 127, .18);
      --radius: 24px;
    }

    html { scroll-behavior: smooth; }
    body {
      font-family: 'Inter', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at top right, rgba(255, 138, 61, .17), transparent 28%),
        radial-gradient(circle at left 20%, rgba(255, 62, 127, .14), transparent 24%),
        radial-gradient(circle at 50% 100%, rgba(139, 92, 246, .10), transparent 24%),
        linear-gradient(180deg, #fffafd 0%, var(--bg) 100%);
      min-height: 100vh;
      overflow-x: hidden;
    }
    * { box-sizing: border-box; }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    button, input, textarea, select { font: inherit; }
    ::selection { background: rgba(255, 62, 127, .18); color: #111827; }

    .panel {
      background: var(--panel);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      backdrop-filter: blur(12px);
    }
    .panel-strong {
      background: var(--panel-strong);
      border: 1px solid rgba(255,255,255,.95);
      box-shadow: 0 20px 55px rgba(17,24,39,.08);
      backdrop-filter: blur(16px);
    }
    .panel-dark {
      background: linear-gradient(135deg, rgba(15,23,42,.96), rgba(30,41,59,.96));
      border: 1px solid rgba(255,255,255,.07);
      box-shadow: 0 22px 60px rgba(15,23,42,.24);
      backdrop-filter: blur(12px);
    }
    .btn-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .55rem;
      border-radius: 999px;
      padding: .92rem 1.35rem;
      background: linear-gradient(90deg, var(--primary), var(--primary-2));
      color: #fff;
      font-weight: 700;
      box-shadow: var(--shadow-2);
      transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
    }
    .btn-primary:hover {
      transform: translateY(-1px);
      box-shadow: 0 18px 32px rgba(255, 62, 127, .28);
      filter: saturate(1.05);
    }
    .btn-primary:active { transform: translateY(0); }
    .btn-secondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .55rem;
      border-radius: 999px;
      padding: .92rem 1.35rem;
      background: rgba(255,255,255,.78);
      color: #111827;
      font-weight: 700;
      border: 1px solid rgba(244,215,228,1);
      transition: transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;
    }
    .btn-secondary:hover {
      transform: translateY(-1px);
      background: rgba(255,255,255,.96);
      border-color: rgba(255, 62, 127, .22);
      box-shadow: 0 16px 30px rgba(17,24,39,.06);
    }
    .btn-secondary:active { transform: translateY(0); }

    .nav-link {
      display: flex;
      align-items: center;
      gap: .65rem;
      border-radius: 999px;
      padding: .78rem .9rem;
      color: #475569;
      border: 1px solid transparent;
      transition: transform .22s ease, background .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease;
    }
    .nav-link:hover {
      color: #111827;
      background: rgba(255,255,255,.82);
      border-color: rgba(244,215,228,1);
      transform: translateX(2px);
      box-shadow: 0 12px 30px rgba(17,24,39,.05);
    }
    .nav-link.active {
      color: #111827;
      background: linear-gradient(90deg, rgba(255,62,127,.16), rgba(255,138,61,.12));
      border-color: rgba(255,62,127,.18);
      box-shadow: 0 12px 30px rgba(255,62,127,.12);
    }

    .badge-soft {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      border-radius: 999px;
      padding: .34rem .8rem;
      background: rgba(255, 62, 127, .1);
      color: #b4235b;
      border: 1px solid rgba(255, 62, 127, .14);
      font-size: .85rem;
      font-weight: 600;
    }
    .chip {
      display: inline-flex;
      align-items: center;
      gap: .38rem;
      border-radius: 999px;
      padding: .48rem .82rem;
      background: rgba(15, 23, 42, .04);
      border: 1px solid rgba(226, 232, 240, .95);
      color: #334155;
      font-size: .9rem;
      transition: background .2s ease, transform .2s ease, border-color .2s ease;
    }
    .chip:hover {
      background: rgba(255,255,255,.96);
      border-color: rgba(255, 62, 127, .18);
      transform: translateY(-1px);
    }

    .section-kicker {
      font-size: .85rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #b4235b;
    }
    .section-title {
      font-size: clamp(1.7rem, 3vw, 3.2rem);
      line-height: 1.05;
      font-weight: 900;
      letter-spacing: -.04em;
    }
    .section-copy {
      color: var(--muted);
      line-height: 1.78;
      font-size: 1rem;
    }

    .info-card {
      border-radius: 26px;
      border: 1px solid rgba(244,215,228,.95);
      background: rgba(255,255,255,.9);
      box-shadow: 0 18px 42px rgba(17,24,39,.05);
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }
    .info-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 24px 50px rgba(17,24,39,.08);
      border-color: rgba(255,62,127,.16);
    }
    .info-card-dark {
      border-radius: 26px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(15, 23, 42, .44);
      color: #e2e8f0;
      box-shadow: 0 16px 35px rgba(15,23,42,.18);
    }

    .faq-item {
      border-radius: 24px;
      border: 1px solid rgba(244,215,228,.95);
      background: rgba(255,255,255,.9);
      box-shadow: 0 16px 38px rgba(17,24,39,.05);
      overflow: hidden;
      transition: border-color .22s ease, box-shadow .22s ease;
    }
    .faq-item[open] {
      border-color: rgba(255,62,127,.22);
      box-shadow: 0 22px 46px rgba(255,62,127,.08);
    }
    .faq-item summary {
      list-style: none;
      cursor: pointer;
    }
    .faq-item summary::-webkit-details-marker { display: none; }

    .input-soft {
      width: 100%;
      border-radius: 999px;
      border: 1px solid rgba(244,215,228,1);
      background: rgba(255,255,255,.98);
      padding: .95rem 1rem;
      color: #111827;
      outline: none;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
      transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
    }
    .input-soft::placeholder { color: #94a3b8; }
    .input-soft:focus {
      border-color: rgba(255,62,127,.42);
      box-shadow: 0 0 0 4px rgba(255,62,127,.08);
    }

    .ring-note {
      position: relative;
    }
    .ring-note::before {
      content: "";
      position: absolute;
      inset: -1px;
      border-radius: inherit;
      padding: 1px;
      background: linear-gradient(135deg, rgba(255,62,127,.2), rgba(255,138,61,.15));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }

    @media (max-width: 767px) {
      .section-title {
        font-size: clamp(1.65rem, 7vw, 2.5rem);
      }
    }

/* roulang page: category1 */
:root{
      --bg:#f5f7fb;
      --surface:rgba(255,255,255,.86);
      --surface-strong:#ffffff;
      --text:#0f172a;
      --muted:#64748b;
      --line:rgba(148,163,184,.22);
      --primary:#ff4d8d;
      --primary-2:#ff8b3d;
      --accent:#7c3aed;
      --shadow:0 20px 70px rgba(15,23,42,.12);
      --shadow-soft:0 10px 30px rgba(15,23,42,.08);
      --radius:28px;
    }
    html{scroll-behavior:smooth}
    body{
      background:
        radial-gradient(circle at top right, rgba(255,77,141,.12), transparent 30%),
        radial-gradient(circle at left 15%, rgba(255,139,61,.10), transparent 24%),
        linear-gradient(180deg, #fbfcff 0%, var(--bg) 100%);
      color:var(--text);
      font-family: "PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      min-height:100vh;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:
        radial-gradient(circle at 1px 1px, rgba(148,163,184,.16) 1px, transparent 0);
      background-size:22px 22px;
      opacity:.45;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.7), transparent 95%);
    }
    ::selection{background:rgba(255,77,141,.18); color:#111827}
    a,button,input,summary{transition:all .22s ease}
    img{max-width:100%; display:block}
    .glass{
      background:var(--surface);
      border:1px solid rgba(255,255,255,.75);
      box-shadow:var(--shadow-soft);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }
    .soft-panel{
      background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.86));
      border:1px solid var(--line);
      box-shadow:var(--shadow-soft);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }
    .nav-link{
      width:100%;
      border-radius:22px;
      padding:.72rem .45rem;
      color:#64748b;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:.35rem;
      position:relative;
      overflow:hidden;
    }
    .nav-link::before{
      content:"";
      position:absolute;
      inset:0;
      opacity:0;
      background:linear-gradient(135deg, rgba(255,77,141,.12), rgba(255,139,61,.12));
    }
    .nav-link:hover{
      color:#0f172a;
      background:rgba(255,255,255,.9);
      transform:translateY(-1px);
    }
    .nav-link:hover::before{opacity:1}
    .nav-link.active{
      color:#fff;
      background:linear-gradient(135deg, var(--primary), var(--primary-2));
      box-shadow:0 14px 28px rgba(255,77,141,.26);
    }
    .nav-link.active::before{display:none}
    .nav-link.active span:first-child{
      background:rgba(255,255,255,.18) !important;
      color:#fff !important;
      box-shadow:none;
      ring-color:rgba(255,255,255,.15);
    }
    .nav-link.active span:last-child{color:#fff}
    .badge{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      border-radius:999px;
      padding:.36rem .76rem;
      font-size:.78rem;
      font-weight:700;
      letter-spacing:.01em;
      background:rgba(255,77,141,.12);
      color:#c91f63;
      border:1px solid rgba(255,77,141,.16);
    }
    .badge-soft{
      background:rgba(15,23,42,.04);
      color:#475569;
      border:1px solid rgba(148,163,184,.16);
    }
    .btn-primary{
      background:linear-gradient(135deg, var(--primary), var(--primary-2));
      color:#fff;
      box-shadow:0 16px 28px rgba(255,77,141,.24);
    }
    .btn-primary:hover{transform:translateY(-2px); box-shadow:0 18px 32px rgba(255,77,141,.32)}
    .btn-secondary{
      background:rgba(255,255,255,.86);
      border:1px solid rgba(148,163,184,.24);
      color:#0f172a;
    }
    .btn-secondary:hover{
      background:#fff;
      border-color:rgba(255,77,141,.22);
      transform:translateY(-2px);
    }
    .section-title{
      letter-spacing:-.03em;
      line-height:1.08;
    }
    .card-sheen{
      position:relative;
      overflow:hidden;
    }
    .card-sheen::after{
      content:"";
      position:absolute;
      inset:-1px;
      background:linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,0) 48%);
      pointer-events:none;
      opacity:.55;
    }
    .filter-btn{
      border-radius:999px;
      padding:.62rem .95rem;
      font-size:.9rem;
      font-weight:700;
      color:#334155;
      background:#fff;
      border:1px solid rgba(148,163,184,.2);
      box-shadow:0 6px 18px rgba(15,23,42,.05);
      white-space:nowrap;
    }
    .filter-btn:hover{
      border-color:rgba(255,77,141,.28);
      color:#111827;
      transform:translateY(-1px);
    }
    .filter-btn.active{
      background:linear-gradient(135deg, rgba(255,77,141,.14), rgba(255,139,61,.14));
      border-color:rgba(255,77,141,.28);
      color:#b91c5a;
      box-shadow:0 10px 22px rgba(255,77,141,.12);
    }
    .search-input{
      background:rgba(255,255,255,.9);
      border:1px solid rgba(148,163,184,.22);
      border-radius:999px;
      padding:.9rem 1rem;
      width:100%;
      color:#0f172a;
      outline:none;
      box-shadow:0 8px 20px rgba(15,23,42,.05);
    }
    .search-input:focus{
      border-color:rgba(255,77,141,.38);
      box-shadow:0 0 0 4px rgba(255,77,141,.12);
    }
    .mini-tag{
      display:inline-flex;
      align-items:center;
      border-radius:999px;
      padding:.25rem .55rem;
      font-size:.72rem;
      font-weight:700;
      color:#475569;
      background:rgba(248,250,252,.9);
      border:1px solid rgba(148,163,184,.18);
    }
    .entry-card{
      background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.84));
      border:1px solid rgba(148,163,184,.18);
      box-shadow:var(--shadow-soft);
      border-radius:28px;
      overflow:hidden;
    }
    .entry-card:hover{
      transform:translateY(-3px);
      border-color:rgba(255,77,141,.22);
      box-shadow:0 20px 38px rgba(15,23,42,.09);
    }
    .entry-dot{
      width:.65rem;
      height:.65rem;
      border-radius:999px;
      background:linear-gradient(135deg, var(--primary), var(--primary-2));
      box-shadow:0 0 0 4px rgba(255,77,141,.12);
      flex:0 0 auto;
    }
    details summary::-webkit-details-marker{display:none}
    details[open] .faq-chevron{transform:rotate(180deg)}
    .progress-ring{
      background:
        radial-gradient(circle at center, #0f172a 0 58%, transparent 58%),
        conic-gradient(var(--primary) 0 78%, rgba(255,255,255,.16) 78% 100%);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 20px 60px rgba(255,77,141,.2);
    }
    .mobile-bottom-bar{
      box-shadow:0 -12px 40px rgba(15,23,42,.12);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }
    @media (max-width: 767px){
      .section-title{letter-spacing:-.025em}
    }