/* roulang page: index */
:root{
      --primary:#EC4899;
      --primary-2:#F472B6;
      --violet:#A78BFA;
      --mint:#5EEAD4;
      --bg:#FFF7FB;
      --bg-2:#FAF7FF;
      --text:#2A1F2D;
      --muted:#726579;
      --line:#F5D0FE;
      --line-2:#FBCFE8;
      --card:#FFFFFF;
      --radius-xl:34px;
      --radius-lg:26px;
      --radius-md:18px;
      --shadow:0 18px 45px rgba(236,72,153,.12);
      --shadow-2:0 26px 70px rgba(167,139,250,.16);
      --nav-h:78px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at 8% 6%, rgba(244,114,182,.18), transparent 34%),
        radial-gradient(circle at 88% 10%, rgba(94,234,212,.16), transparent 28%),
        linear-gradient(180deg,var(--bg) 0%,#fff 42%,var(--bg-2) 100%);
      line-height:1.75;
      overflow-x:hidden;
    }
    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:radial-gradient(rgba(236,72,153,.14) 1px, transparent 1px);
      background-size:22px 22px;
      opacity:.34;
      mask-image:linear-gradient(180deg,#000,transparent 78%);
      z-index:-1;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    .site-container{width:min(1220px,calc(100% - 36px));margin-inline:auto}
    .section-space{padding:78px 0}
    .section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:28px}
    .section-kicker{
      display:inline-flex;align-items:center;gap:8px;
      padding:7px 12px;border-radius:999px;
      background:rgba(236,72,153,.09);border:1px solid var(--line-2);
      color:#B83280;font-weight:800;font-size:13px;
    }
    .section-title{font-size:clamp(28px,4vw,42px);line-height:1.16;font-weight:900;letter-spacing:-.03em;margin-top:12px}
    .section-desc{color:var(--muted);max-width:690px;font-size:16px}
    .site-header{
      position:sticky;top:16px;z-index:50;margin-top:16px;
    }
    .nav-shell{
      min-height:var(--nav-h);
      display:flex;align-items:center;justify-content:space-between;gap:18px;
      padding:12px 14px 12px 18px;border:1px solid rgba(245,208,254,.85);
      border-radius:999px;background:rgba(255,255,255,.82);
      box-shadow:0 14px 40px rgba(236,72,153,.10);
      backdrop-filter:blur(18px);
    }
    .brand{display:flex;align-items:center;gap:11px;min-width:0}
    .brand-mark{
      width:45px;height:45px;border-radius:17px;
      background:linear-gradient(135deg,var(--primary),var(--violet));
      display:grid;place-items:center;color:#fff;font-weight:900;
      box-shadow:0 12px 26px rgba(236,72,153,.25);
      flex:0 0 auto;
    }
    .brand-text{font-weight:900;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:290px}
    .nav-links{display:flex;align-items:center;gap:6px}
    .nav-links a{
      padding:10px 15px;border-radius:999px;color:#514456;font-weight:800;font-size:14px;
      transition:.2s ease;border:1px solid transparent;
    }
    .nav-links a:hover{background:#FFF0F8;border-color:var(--line-2);transform:translateY(-1px)}
    .nav-links a.active{
      color:#fff;background:linear-gradient(135deg,var(--primary),var(--violet));
      box-shadow:0 10px 24px rgba(236,72,153,.18);
    }
    .nav-actions{display:flex;align-items:center;gap:10px}
    .age-badge,.mini-badge{
      display:inline-flex;align-items:center;gap:6px;padding:8px 11px;
      border-radius:999px;font-weight:900;font-size:12px;border:1px solid var(--line);
      background:#fff;color:#B83280;
    }
    .menu-btn{display:none;width:42px;height:42px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--text)}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:9px;
      min-height:46px;padding:0 20px;border-radius:999px;font-weight:900;
      transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease;
      border:1px solid transparent;white-space:nowrap;
    }
    .btn-primary{
      color:#fff;background:linear-gradient(135deg,var(--primary),var(--violet));
      box-shadow:0 16px 32px rgba(236,72,153,.22);
    }
    .btn-primary:hover{transform:translateY(-3px);box-shadow:0 22px 48px rgba(236,72,153,.28)}
    .btn-secondary{background:#fff;color:#8A2D69;border-color:var(--line-2)}
    .btn-secondary:hover{background:#FFF0F8;transform:translateY(-2px);box-shadow:var(--shadow)}
    .btn:focus,.nav-links a:focus,input:focus,select:focus,textarea:focus,button:focus{outline:3px solid rgba(94,234,212,.42);outline-offset:3px}
    .hero{
      padding:52px 0 40px;
    }
    .hero-stage{
      position:relative;overflow:hidden;border-radius:42px;
      border:1px solid rgba(245,208,254,.95);
      background:
        linear-gradient(135deg,rgba(255,247,251,.96),rgba(250,247,255,.88)),
        radial-gradient(circle at 20% 25%,rgba(244,114,182,.24),transparent 30%),
        radial-gradient(circle at 78% 40%,rgba(94,234,212,.18),transparent 28%);
      box-shadow:var(--shadow-2);
      padding:34px;
    }
    .hero-stage:after{
      content:"";position:absolute;right:-80px;top:-80px;width:280px;height:280px;
      border-radius:999px;background:linear-gradient(135deg,rgba(244,114,182,.25),rgba(167,139,250,.18));
      filter:blur(4px);
    }
    .coupon-wall{
      position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;gap:28px;align-items:stretch;
    }
    .main-coupon{
      min-height:500px;border-radius:34px;padding:34px;
      background:#fff;border:1px solid var(--line-2);box-shadow:var(--shadow);
      position:relative;overflow:hidden;
    }
    .main-coupon:before,.main-coupon:after{
      content:"";position:absolute;top:48%;width:34px;height:34px;border-radius:50%;background:#FFF7FB;border:1px solid var(--line-2)
    }
    .main-coupon:before{left:-18px}.main-coupon:after{right:-18px}
    .coupon-code{
      display:inline-flex;align-items:center;gap:10px;padding:9px 13px;border-radius:16px;
      background:linear-gradient(135deg,rgba(236,72,153,.12),rgba(94,234,212,.12));
      color:#B83280;font-weight:900;border:1px dashed rgba(236,72,153,.35);
    }
    .hero h1{font-size:clamp(34px,5.4vw,64px);line-height:1.05;font-weight:950;letter-spacing:-.055em;margin:22px 0 18px}
    .hero p{font-size:17px;color:var(--muted);max-width:640px}
    .hero-data{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:26px 0}
    .data-pill{
      border-radius:20px;background:#FFF7FB;border:1px solid var(--line-2);
      padding:14px 12px;text-align:center;
    }
    .data-pill strong{display:block;font-size:24px;color:#B83280;line-height:1.1}
    .data-pill span{font-size:12px;color:var(--muted);font-weight:800}
    .coupon-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
    .step-card,.index-tile,.soft-card{
      background:rgba(255,255,255,.88);border:1px solid var(--line);
      border-radius:26px;padding:20px;box-shadow:var(--shadow);
      transition:.22s ease;position:relative;overflow:hidden;
    }
    .step-card:hover,.index-tile:hover,.soft-card:hover,.slide-card:hover,.recommend-card:hover,.topic-card:hover{transform:translateY(-4px);border-color:rgba(236,72,153,.5);box-shadow:0 26px 58px rgba(236,72,153,.16)}
    .num{
      display:inline-grid;place-items:center;width:36px;height:36px;border-radius:14px;
      background:linear-gradient(135deg,var(--primary),var(--violet));color:#fff;font-weight:950;
      box-shadow:0 10px 20px rgba(236,72,153,.18);
    }
    .status{
      position:absolute;right:16px;top:16px;font-size:12px;font-weight:900;
      color:#0F766E;background:rgba(94,234,212,.18);border:1px solid rgba(94,234,212,.38);
      border-radius:999px;padding:5px 10px;
    }
    .step-card h3,.index-tile h3,.soft-card h3{font-size:20px;font-weight:900;margin:14px 0 6px}
    .step-card p,.index-tile p,.soft-card p{color:var(--muted);font-size:14px}
    .slide-track{
      display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 18px;
      scrollbar-width:none;
    }
    .slide-track::-webkit-scrollbar{display:none}
    .slide-card{
      min-width:275px;scroll-snap-align:start;border-radius:28px;padding:22px;
      background:linear-gradient(180deg,#fff,#FFF7FB);border:1px solid var(--line-2);
      box-shadow:var(--shadow);transition:.22s ease;position:relative;
    }
    .slide-card .arrow{
      margin-top:20px;width:42px;height:42px;border-radius:16px;display:grid;place-items:center;
      background:linear-gradient(135deg,var(--primary),var(--violet));color:#fff;font-weight:900;
    }
    .data-strip{
      display:grid;grid-template-columns:1.1fr repeat(3,.8fr);gap:16px;
      border-radius:32px;padding:22px;background:#fff;border:1px solid var(--line);
      box-shadow:var(--shadow);
    }
    .data-intro{padding:10px}
    .data-box{
      padding:22px;border-radius:24px;background:linear-gradient(135deg,#FFF7FB,#FAF7FF);
      border:1px solid var(--line-2);
    }
    .data-box strong{display:block;font-size:34px;line-height:1;color:#B83280}
    .data-box span{display:block;margin-top:8px;color:var(--muted);font-weight:800;font-size:13px}
    .lead-wrap{display:grid;grid-template-columns:.82fr 1.18fr;gap:22px;align-items:start}
    .lead-panel{
      border-radius:34px;padding:28px;background:linear-gradient(135deg,rgba(236,72,153,.10),rgba(94,234,212,.12));
      border:1px solid var(--line);box-shadow:var(--shadow);
    }
    .lead-form{
      border-radius:34px;padding:26px;background:#fff;border:1px solid var(--line-2);box-shadow:var(--shadow);
      display:grid;gap:16px;
    }
    .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .field label{display:block;font-weight:900;margin-bottom:7px;color:#49364F}
    .field input,.field select,.field textarea{
      width:100%;border:1px solid var(--line);border-radius:18px;padding:13px 14px;background:#FFFCFE;color:var(--text);
      transition:.2s ease;
    }
    .field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(236,72,153,.55);background:#fff}
    .field textarea{min-height:116px;resize:vertical}
    .info-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:22px}
    .news-list,.side-box{
      border-radius:32px;background:#fff;border:1px solid var(--line-2);box-shadow:var(--shadow);padding:22px;
    }
    .news-list a{
      display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
      padding:15px 0;border-bottom:1px dashed rgba(245,208,254,.9);
      transition:.2s ease;
    }
    .news-list a:last-child{border-bottom:0}
    .news-list a:hover{color:#B83280;transform:translateX(4px)}
    .date-badge{
      padding:6px 10px;border-radius:999px;background:#FFF0F8;color:#B83280;font-weight:900;font-size:12px;
    }
    .topic-grid{
      display:grid;grid-template-columns:1.25fr .75fr;gap:18px;
    }
    .topic-card{
      border-radius:30px;background:#fff;border:1px solid var(--line-2);padding:24px;box-shadow:var(--shadow);
      transition:.22s ease;position:relative;overflow:hidden;
    }
    .topic-card.large{min-height:310px;background:linear-gradient(135deg,#fff,#FFF7FB)}
    .topic-stack{display:grid;gap:18px}
    .tag-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
    .tag{
      display:inline-flex;align-items:center;border-radius:999px;padding:7px 11px;
      background:#FFF0F8;border:1px solid var(--line-2);color:#9D2F6D;font-weight:900;font-size:12px;
    }
    .tag.mint{background:rgba(94,234,212,.14);border-color:rgba(94,234,212,.32);color:#0F766E}
    .version-list{display:grid;gap:14px}
    .version-item{
      display:grid;grid-template-columns:auto 1fr;gap:16px;padding:18px;border-radius:24px;
      background:#fff;border:1px solid var(--line-2);box-shadow:0 12px 28px rgba(167,139,250,.08);
    }
    .faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
    details.faq{
      border-radius:24px;background:#fff;border:1px solid var(--line-2);
      padding:18px 20px;box-shadow:0 14px 34px rgba(236,72,153,.09);
      transition:.2s ease;
    }
    details.faq:hover{border-color:rgba(236,72,153,.45)}
    details.faq summary{list-style:none;font-weight:950;cursor:pointer;display:flex;justify-content:space-between;gap:16px}
    details.faq summary::-webkit-details-marker{display:none}
    details.faq summary:after{content:"＋";color:#B83280;font-weight:950}
    details.faq[open] summary:after{content:"－"}
    details.faq p{color:var(--muted);margin-top:12px;font-size:15px}
    .privacy-cta{
      border-radius:38px;padding:34px;background:
        linear-gradient(135deg,rgba(236,72,153,.14),rgba(167,139,250,.13),rgba(94,234,212,.12));
      border:1px solid var(--line);box-shadow:var(--shadow-2);
      display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center;
    }
    .footer{
      padding:34px 0 42px;border-top:1px solid rgba(245,208,254,.82);
      background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,247,251,.72));
    }
    .footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:28px}
    .footer a{color:#65566A;font-weight:800}
    .footer a:hover{color:#B83280}
    .footer-title{font-weight:950;margin-bottom:12px}
    .copyright{margin-top:26px;padding-top:18px;border-top:1px dashed var(--line);color:var(--muted);font-size:13px}
    .mobile-panel{display:none}
    @media (max-width:1024px){
      .coupon-wall,.lead-wrap,.info-layout,.topic-grid,.privacy-cta{grid-template-columns:1fr}
      .data-strip{grid-template-columns:1fr 1fr}
      .nav-links{display:none}
      .menu-btn{display:grid;place-items:center}
      .mobile-panel.open{display:grid;gap:8px;margin-top:10px;padding:14px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
      .mobile-panel a{padding:12px 14px;border-radius:16px;font-weight:900}
      .mobile-panel a.active{background:linear-gradient(135deg,var(--primary),var(--violet));color:#fff}
    }
    @media (max-width:768px){
      .site-container{width:min(100% - 24px,1220px)}
      .site-header{top:8px;margin-top:8px}
      .nav-shell{border-radius:26px;min-height:68px}
      .brand-text{max-width:170px;font-size:14px}
      .age-badge{display:none}
      .hero-stage{padding:18px;border-radius:30px}
      .main-coupon{padding:24px;min-height:auto;border-radius:28px}
      .coupon-grid,.hero-data,.form-grid,.faq-grid,.footer-grid{grid-template-columns:1fr}
      .section-space{padding:54px 0}
      .section-head{display:block}
      .data-strip{grid-template-columns:1fr}
      .slide-card{min-width:84%}
      .privacy-cta{padding:24px;border-radius:30px}
    }
    @media (max-width:520px){
      .nav-actions .btn{display:none}
      .hero h1{font-size:34px}
      .btn{width:100%}
      .hero .flex{width:100%}
      .main-coupon .flex.flex-wrap{flex-direction:column}
      .data-box strong{font-size:30px}
    }

/* roulang page: category2 */
:root{
      --bg:#FFF7FB;
      --bg2:#FAF7FF;
      --panel:rgba(255,255,255,.82);
      --ink:#2A1F2D;
      --muted:#726579;
      --line:#F5D0FE;
      --line2:#FBCFE8;
      --primary:#EC4899;
      --primary2:#A78BFA;
      --accent:#5EEAD4;
      --shadow:0 18px 45px rgba(236,72,153,.12);
      --shadow2:0 10px 30px rgba(167,139,250,.12);
      --radius-xl:32px;
      --radius-lg:24px;
      --radius-md:18px;
      --container:1240px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--ink);
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
      line-height:1.8;
      background:
        radial-gradient(circle at 15% 10%, rgba(244,114,182,.16), transparent 24%),
        radial-gradient(circle at 85% 18%, rgba(167,139,250,.16), transparent 20%),
        radial-gradient(circle at 50% 100%, rgba(94,234,212,.12), transparent 24%),
        linear-gradient(180deg, #FFF8FC 0%, #FAF7FF 58%, #F8FAFC 100%);
      min-height:100vh;
    }
    a{text-decoration:none;color:inherit}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    ::selection{background:rgba(236,72,153,.18);color:#1f1720}
    .site-container{
      max-width:var(--container);
      margin:0 auto;
      padding-left:20px;
      padding-right:20px;
    }
    .nav-shell{
      backdrop-filter:blur(16px);
      -webkit-backdrop-filter:blur(16px);
      background:rgba(255,255,255,.78);
      border:1px solid rgba(245,208,254,.92);
      box-shadow:0 14px 38px rgba(167,139,250,.10);
      border-radius:999px;
    }
    .brand{
      display:inline-flex;
      align-items:center;
      gap:.7rem;
      font-weight:800;
      letter-spacing:.2px;
      color:var(--ink);
    }
    .brand-mark{
      width:2.2rem;height:2.2rem;
      display:grid;place-items:center;
      border-radius:999px;
      color:#fff;
      background:linear-gradient(135deg,var(--primary),var(--primary2));
      box-shadow:0 10px 24px rgba(236,72,153,.22);
      flex:0 0 auto;
    }
    .brand-text{font-size:1.02rem}
    .nav-links a{
      position:relative;
      color:#4b3d51;
      font-weight:700;
      padding:.7rem 1rem;
      border-radius:999px;
      transition:all .2s ease;
    }
    .nav-links a:hover,
    .nav-links a:focus-visible{
      background:rgba(244,114,182,.10);
      color:#231827;
      outline:none;
    }
    .nav-links a.active,
    .nav-links a[aria-current="page"]{
      background:linear-gradient(135deg, rgba(236,72,153,.16), rgba(167,139,250,.14));
      color:#1e1720;
      box-shadow:inset 0 0 0 1px rgba(236,72,153,.18);
    }
    .btn-primary{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.45rem;
      padding:.9rem 1.25rem;
      border-radius:999px;
      color:#fff;
      background:linear-gradient(135deg,var(--primary),var(--primary2));
      box-shadow:0 14px 28px rgba(236,72,153,.22);
      border:0;
      transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
      font-weight:700;
    }
    .btn-primary:hover,.btn-primary:focus-visible{
      transform:translateY(-2px);
      box-shadow:0 18px 34px rgba(236,72,153,.25);
      outline:none;
      filter:saturate(1.04);
    }
    .btn-secondary{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.45rem;
      padding:.9rem 1.25rem;
      border-radius:999px;
      color:#3a2d40;
      background:#fff;
      border:1px solid rgba(236,72,153,.22);
      box-shadow:0 10px 24px rgba(167,139,250,.08);
      transition:transform .2s ease, background .2s ease, border-color .2s ease;
      font-weight:700;
    }
    .btn-secondary:hover,.btn-secondary:focus-visible{
      transform:translateY(-2px);
      background:rgba(252,231,243,.55);
      border-color:rgba(236,72,153,.34);
      outline:none;
    }
    .age-badge,.pill{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.42rem .78rem;
      border-radius:999px;
      font-size:.78rem;
      font-weight:800;
      letter-spacing:.02em;
      background:rgba(244,114,182,.12);
      color:#9d1458;
      border:1px solid rgba(244,114,182,.18);
      white-space:nowrap;
    }
    .pill-soft{
      background:rgba(167,139,250,.12);
      color:#5b4a8f;
      border:1px solid rgba(167,139,250,.18);
    }
    .pill-mint{
      background:rgba(94,234,212,.16);
      color:#0f766e;
      border:1px solid rgba(94,234,212,.18);
    }
    .hero-card, .panel-card, .grid-card, .notice-card, .faq-card, .footer{
      border:1px solid rgba(245,208,254,.9);
      background:var(--panel);
      box-shadow:var(--shadow);
    }
    .hero-card{
      border-radius:var(--radius-xl);
      position:relative;
      overflow:hidden;
    }
    .hero-card::before{
      content:"";
      position:absolute;
      inset:-2px;
      background:
        radial-gradient(circle at 18% 18%, rgba(244,114,182,.12), transparent 26%),
        radial-gradient(circle at 84% 26%, rgba(167,139,250,.12), transparent 22%),
        linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,0));
      pointer-events:none;
    }
    .section-title{
      font-size:clamp(1.6rem, 2.2vw, 2.6rem);
      line-height:1.15;
      font-weight:900;
      letter-spacing:-.02em;
    }
    .section-subtitle{
      color:var(--muted);
      font-size:1rem;
    }
    .num-badge{
      display:inline-grid;
      place-items:center;
      width:2rem;height:2rem;
      border-radius:999px;
      background:linear-gradient(135deg, rgba(236,72,153,.14), rgba(167,139,250,.16));
      color:#8f1f5e;
      font-weight:900;
      border:1px solid rgba(236,72,153,.18);
      flex:0 0 auto;
    }
    .mini-stat{
      border-radius:18px;
      background:rgba(255,255,255,.7);
      border:1px solid rgba(245,208,254,.75);
      box-shadow:var(--shadow2);
    }
    .grid-card{
      border-radius:28px;
      position:relative;
      overflow:hidden;
      transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .grid-card:hover{
      transform:translateY(-4px);
      box-shadow:0 22px 50px rgba(236,72,153,.16);
      border-color:rgba(236,72,153,.28);
    }
    .grid-card .card-glow{
      position:absolute;
      inset:auto -10% -40% auto;
      width:10rem;height:10rem;
      background:radial-gradient(circle, rgba(236,72,153,.18), transparent 70%);
      pointer-events:none;
    }
    .tag-scroll{
      scrollbar-width:none;
      -ms-overflow-style:none;
    }
    .tag-scroll::-webkit-scrollbar{display:none}
    .tag-chip{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding:.72rem 1rem;
      border-radius:999px;
      border:1px solid rgba(245,208,254,.92);
      background:rgba(255,255,255,.86);
      box-shadow:0 8px 24px rgba(167,139,250,.08);
      font-weight:700;
      color:#3e3245;
      white-space:nowrap;
      transition:all .2s ease;
    }
    .tag-chip:hover,.tag-chip:focus-visible{
      transform:translateY(-2px);
      border-color:rgba(236,72,153,.26);
      background:rgba(252,231,243,.7);
      outline:none;
    }
    .tag-chip.active{
      color:#fff;
      background:linear-gradient(135deg,var(--primary),var(--primary2));
      border-color:transparent;
      box-shadow:0 12px 26px rgba(236,72,153,.20);
    }
    .list-check li{
      position:relative;
      padding-left:1.8rem;
    }
    .list-check li::before{
      content:"";
      position:absolute;
      left:0;
      top:.6rem;
      width:.95rem;height:.95rem;
      border-radius:999px;
      background:linear-gradient(135deg,var(--primary),var(--primary2));
      box-shadow:0 0 0 4px rgba(236,72,153,.08);
    }
    details.faq-item{
      border-radius:24px;
      border:1px solid rgba(245,208,254,.88);
      background:rgba(255,255,255,.82);
      box-shadow:0 12px 28px rgba(167,139,250,.08);
      overflow:hidden;
    }
    details.faq-item summary{
      list-style:none;
      cursor:pointer;
      padding:1.15rem 1.2rem;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      font-weight:800;
      color:#372c3d;
    }
    details.faq-item summary::-webkit-details-marker{display:none}
    details.faq-item .faq-content{
      padding:0 1.2rem 1.15rem;
      color:var(--muted);
      line-height:1.8;
    }
    .faq-plus{
      width:2rem;height:2rem;
      flex:0 0 auto;
      border-radius:999px;
      display:grid;
      place-items:center;
      background:rgba(236,72,153,.08);
      color:#a1185d;
      transition:transform .2s ease, background .2s ease;
    }
    details[open] .faq-plus{
      transform:rotate(45deg);
      background:rgba(167,139,250,.12);
    }
    .footer{
      border-radius:34px 34px 0 0;
      border-bottom:0;
      background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(250,247,255,.98));
    }
    .footer-title{
      font-weight:900;
      color:#2b2230;
      margin-bottom:.8rem;
    }
    .copyright{
      border-top:1px solid rgba(245,208,254,.9);
      margin-top:1.4rem;
      padding-top:1rem;
      color:#726579;
      font-size:.92rem;
    }
    .input-field, .select-field, .search-field{
      width:100%;
      border-radius:18px;
      border:1px solid rgba(245,208,254,.95);
      background:rgba(255,255,255,.88);
      padding:.95rem 1rem;
      color:#2b2230;
      outline:none;
      transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
      box-shadow:0 8px 18px rgba(167,139,250,.06);
    }
    .input-field:focus, .select-field:focus, .search-field:focus{
      border-color:rgba(236,72,153,.42);
      box-shadow:0 0 0 4px rgba(236,72,153,.08);
    }
    .border-soft{border-color:rgba(245,208,254,.9)}
    .glass-line{background:linear-gradient(90deg, transparent, rgba(236,72,153,.22), transparent)}
    .mobile-menu{
      border:1px solid rgba(245,208,254,.9);
      background:rgba(255,255,255,.92);
      box-shadow:var(--shadow);
      border-radius:24px;
    }
    @media (max-width: 1024px){
      .hero-card{border-radius:28px}
    }
    @media (max-width: 768px){
      .site-container{padding-left:16px;padding-right:16px}
      .nav-shell{border-radius:28px}
      .footer{border-radius:28px 28px 0 0}
    }

/* roulang page: category1 */
:root{
      --bg:#FFF7FB;
      --bg-2:#FAF7FF;
      --card:#ffffff;
      --card-2:#FFF2F8;
      --line:#F5D0FE;
      --line-2:#FBCFE8;
      --text:#2A1F2D;
      --muted:#726579;
      --muted-2:#9B8AA2;
      --brand:#EC4899;
      --brand-2:#F472B6;
      --accent:#A78BFA;
      --accent-2:#5EEAD4;
      --shadow:0 18px 45px rgba(236,72,153,.12);
      --shadow-2:0 14px 30px rgba(167,139,250,.12);
      --radius-xl:32px;
      --radius-lg:24px;
      --radius-md:18px;
      --radius-sm:14px;
      --container:1240px;
    }

    html{scroll-behavior:smooth;}
    body{
      margin:0;
      font-family: system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at 10% 10%, rgba(244,114,182,.12), transparent 28%),
        radial-gradient(circle at 90% 15%, rgba(167,139,250,.11), transparent 26%),
        radial-gradient(circle at 78% 90%, rgba(94,234,212,.10), transparent 24%),
        linear-gradient(180deg, #FFF8FC 0%, #FAF7FF 44%, #F8FAFC 100%);
      line-height:1.8;
    }

    *{box-sizing:border-box}
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    ::selection{background:rgba(244,114,182,.22);color:var(--text)}
    .site-container{
      max-width:var(--container);
      margin:0 auto;
      padding-left:1rem;
      padding-right:1rem;
    }
    .nav-shell{
      background:rgba(255,255,255,.82);
      border:1px solid rgba(245,208,254,.75);
      box-shadow:var(--shadow);
      backdrop-filter:blur(14px);
      border-radius:999px;
    }
    .brand{
      display:inline-flex;
      align-items:center;
      gap:.8rem;
      font-weight:800;
      letter-spacing:.02em;
      color:var(--text);
      min-width:max-content;
    }
    .brand-mark{
      width:2.1rem;
      height:2.1rem;
      display:grid;
      place-items:center;
      border-radius:999px;
      color:#fff;
      background:linear-gradient(135deg,var(--brand),var(--accent));
      box-shadow:0 10px 25px rgba(236,72,153,.18);
      font-size:1rem;
      flex:0 0 auto;
    }
    .brand-text{
      font-size:1.02rem;
      font-weight:800;
      line-height:1.1;
    }
    .nav-links{
      display:flex;
      align-items:center;
      gap:.5rem;
      flex-wrap:wrap;
    }
    .nav-links a{
      padding:.7rem 1rem;
      border-radius:999px;
      color:#4b4151;
      border:1px solid transparent;
      transition:all .2s ease;
      font-weight:700;
      font-size:.95rem;
    }
    .nav-links a:hover,
    .nav-links a:focus-visible{
      background:#fff;
      border-color:rgba(244,114,182,.35);
      color:#2f2134;
      outline:none;
      transform:translateY(-1px);
    }
    .nav-links a.active{
      background:linear-gradient(135deg, rgba(244,114,182,.15), rgba(167,139,250,.13));
      border-color:rgba(244,114,182,.34);
      color:#9f1d69;
      box-shadow:0 8px 22px rgba(244,114,182,.10);
    }
    .nav-actions{
      display:flex;
      align-items:center;
      gap:.65rem;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .age-badge,
    .mini-badge,
    .chip,
    .tag{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      border-radius:999px;
      font-size:.78rem;
      font-weight:800;
      line-height:1;
      white-space:nowrap;
    }
    .age-badge{
      padding:.55rem .8rem;
      color:#a01a63;
      background:linear-gradient(135deg, rgba(244,114,182,.16), rgba(251,207,232,.55));
      border:1px solid rgba(244,114,182,.26);
    }
    .mini-badge{
      padding:.48rem .7rem;
      color:#7c3aed;
      background:rgba(167,139,250,.12);
      border:1px solid rgba(167,139,250,.18);
    }
    .chip{
      padding:.5rem .85rem;
      background:#fff;
      color:#4b4151;
      border:1px solid rgba(245,208,254,.85);
      box-shadow:0 8px 18px rgba(167,139,250,.06);
    }
    .chip.active{
      color:#9f1d69;
      background:linear-gradient(135deg, rgba(244,114,182,.17), rgba(167,139,250,.15));
      border-color:rgba(244,114,182,.3);
    }
    .tag{
      padding:.4rem .65rem;
      background:rgba(248,250,252,.9);
      color:#6e6175;
      border:1px solid rgba(226,232,240,.95);
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.5rem;
      padding:.85rem 1.15rem;
      border-radius:999px;
      font-weight:800;
      border:1px solid transparent;
      transition:all .2s ease;
      line-height:1.1;
      white-space:nowrap;
    }
    .btn:hover,
    .btn:focus-visible{
      transform:translateY(-1px);
      outline:none;
    }
    .btn-primary{
      color:#fff;
      background:linear-gradient(135deg,var(--brand),var(--accent));
      box-shadow:0 12px 30px rgba(236,72,153,.22);
    }
    .btn-primary:hover,
    .btn-primary:focus-visible{
      box-shadow:0 18px 34px rgba(236,72,153,.28);
    }
    .btn-secondary{
      color:#4a3f50;
      background:#fff;
      border-color:rgba(244,114,182,.26);
      box-shadow:0 10px 25px rgba(236,72,153,.06);
    }
    .btn-secondary:hover,
    .btn-secondary:focus-visible{
      background:#fff4fa;
      border-color:rgba(236,72,153,.36);
    }
    .menu-btn{
      width:2.75rem;
      height:2.75rem;
      display:inline-grid;
      place-items:center;
      border-radius:999px;
      border:1px solid rgba(244,114,182,.26);
      background:#fff;
      color:#8e3760;
      box-shadow:0 10px 25px rgba(236,72,153,.08);
      transition:all .2s ease;
    }
    .menu-btn:hover,
    .menu-btn:focus-visible{
      transform:translateY(-1px);
      outline:none;
      background:#fff6fb;
    }

    .panel,
    .soft-card,
    .faq-item,
    .hero-panel{
      background:rgba(255,255,255,.88);
      border:1px solid rgba(245,208,254,.8);
      box-shadow:var(--shadow);
      border-radius:var(--radius-xl);
    }
    .soft-card{
      border-radius:28px;
      overflow:hidden;
    }
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:.45rem .8rem;
      border-radius:999px;
      color:#9b2365;
      background:linear-gradient(135deg, rgba(244,114,182,.15), rgba(167,139,250,.12));
      border:1px solid rgba(244,114,182,.18);
      font-size:.8rem;
      font-weight:800;
      letter-spacing:.04em;
    }
    .section-title{
      margin:0;
      color:var(--text);
      font-weight:900;
      line-height:1.12;
      letter-spacing:-.02em;
    }
    .section-subtitle{
      color:var(--muted);
      font-size:1rem;
      line-height:1.85;
    }
    .hero-shell{
      position:relative;
      overflow:hidden;
      border-radius:36px;
      background:
        linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,248,252,.92)),
        radial-gradient(circle at 12% 18%, rgba(244,114,182,.14), transparent 28%),
        radial-gradient(circle at 82% 20%, rgba(167,139,250,.12), transparent 26%);
    }
    .hero-shell::before{
      content:"";
      position:absolute;
      inset:0;
      background-image:
        linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px);
      background-size:24px 24px;
      opacity:.35;
      pointer-events:none;
      mask-image:linear-gradient(180deg, rgba(0,0,0,.28), transparent 75%);
    }
    .hero-title{
      font-size:clamp(2rem, 5vw, 4rem);
      line-height:1.06;
      letter-spacing:-.04em;
      font-weight:900;
      color:var(--text);
    }
    .hero-copy{
      color:var(--muted);
      font-size:1.04rem;
      line-height:1.9;
      max-width:58ch;
    }
    .mini-stat{
      background:rgba(255,255,255,.76);
      border:1px solid rgba(245,208,254,.78);
      border-radius:22px;
      box-shadow:0 12px 24px rgba(167,139,250,.07);
      padding:1rem 1rem .95rem;
    }
    .mini-stat .num{
      font-size:1.28rem;
      font-weight:900;
      color:#8d1b57;
      line-height:1;
    }
    .mini-stat .label{
      margin-top:.35rem;
      color:var(--muted);
      font-size:.88rem;
    }
    .hero-step{
      padding:1rem 1rem .95rem;
      border-radius:24px;
      background:linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,242,248,.95));
      border:1px solid rgba(245,208,254,.8);
      box-shadow:0 14px 28px rgba(236,72,153,.07);
    }
    .step-no{
      width:2rem;
      height:2rem;
      display:grid;
      place-items:center;
      border-radius:999px;
      color:#fff;
      font-weight:900;
      background:linear-gradient(135deg,var(--brand),var(--accent));
      box-shadow:0 8px 18px rgba(236,72,153,.18);
      flex:0 0 auto;
    }
    .hero-note{
      border-radius:24px;
      padding:1rem 1rem .95rem;
      background:linear-gradient(135deg, rgba(94,234,212,.1), rgba(167,139,250,.12));
      border:1px solid rgba(94,234,212,.24);
    }
    .scrollbar-hidden::-webkit-scrollbar{height:0;width:0}
    .scrollbar-hidden{scrollbar-width:none;-ms-overflow-style:none}
    .scroll-snap-x{scroll-snap-type:x mandatory}
    .scroll-item{scroll-snap-align:start}
    .catalog-card,
    .compact-card{
      position:relative;
      overflow:hidden;
      background:linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,248,252,.96));
      border:1px solid rgba(245,208,254,.78);
      border-radius:28px;
      box-shadow:var(--shadow);
      transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .catalog-card:hover,
    .compact-card:hover{
      transform:translateY(-4px);
      border-color:rgba(236,72,153,.34);
      box-shadow:0 22px 50px rgba(236,72,153,.16);
    }
    .catalog-card::after,
    .compact-card::after{
      content:"";
      position:absolute;
      inset:auto -14% -22% auto;
      width:10rem;
      height:10rem;
      border-radius:999px;
      background:radial-gradient(circle, rgba(244,114,182,.15), transparent 68%);
      pointer-events:none;
    }
    .card-figure{
      background:
        linear-gradient(135deg, rgba(244,114,182,.12), rgba(167,139,250,.09)),
        radial-gradient(circle at 24% 30%, rgba(255,255,255,.8), transparent 42%),
        radial-gradient(circle at 80% 22%, rgba(94,234,212,.12), transparent 30%);
      border-bottom:1px solid rgba(245,208,254,.72);
      min-height:120px;
      position:relative;
    }
    .card-figure::before{
      content:"";
      position:absolute;
      inset:14px;
      border:1px dashed rgba(244,114,182,.22);
      border-radius:22px;
    }
    .card-pin{
      position:absolute;
      left:1rem;
      top:1rem;
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.45rem .7rem;
      border-radius:999px;
      background:rgba(255,255,255,.84);
      color:#8d1b57;
      font-weight:800;
      font-size:.8rem;
      border:1px solid rgba(244,114,182,.18);
      box-shadow:0 10px 22px rgba(244,114,182,.08);
    }
    .card-status{
      position:absolute;
      right:1rem;
      top:1rem;
      padding:.44rem .68rem;
      border-radius:999px;
      font-size:.76rem;
      font-weight:800;
      color:#0f766e;
      background:rgba(94,234,212,.18);
      border:1px solid rgba(94,234,212,.25);
    }
    .card-footer-link{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      color:#9b2365;
      font-weight:800;
      transition:gap .2s ease,color .2s ease;
    }
    .card-footer-link:hover{gap:.55rem;color:#7f1d54}
    .info-grid{
      display:grid;
      gap:1rem;
    }
    .info-strip{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:1rem;
    }
    .topic-grid{
      display:grid;
      grid-template-columns:1.15fr .85fr .85fr;
      gap:1rem;
    }
    .topic-wide{grid-column:span 1}
    .topic-compact{min-height:100%}
    .badge-soft{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.45rem .72rem;
      border-radius:999px;
      background:#fff;
      border:1px solid rgba(245,208,254,.82);
      color:#7f1d54;
      font-weight:800;
      font-size:.78rem;
    }
    .faq-item{
      overflow:hidden;
      transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
    }
    .faq-item summary{
      list-style:none;
      cursor:pointer;
      padding:1.15rem 1.2rem;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      font-weight:800;
      color:#3b3140;
    }
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary .plus{
      width:2rem;
      height:2rem;
      flex:0 0 auto;
      display:grid;
      place-items:center;
      border-radius:999px;
      color:#9b2365;
      background:linear-gradient(135deg, rgba(244,114,182,.12), rgba(167,139,250,.09));
      transition:transform .2s ease;
    }
    .faq-item[open] summary .plus{transform:rotate(45deg)}
    .faq-body{
      padding:0 1.2rem 1.2rem;
      color:var(--muted);
      line-height:1.86;
    }
    .cta-banner{
      border-radius:34px;
      overflow:hidden;
      background:
        linear-gradient(135deg, rgba(244,114,182,.16), rgba(167,139,250,.12)),
        linear-gradient(135deg, #fff, #fff7fb);
      border:1px solid rgba(244,114,182,.24);
      box-shadow:var(--shadow);
    }
    .footer{
      margin-top:4rem;
      padding:2.5rem 0 1.3rem;
      border-top:1px solid rgba(245,208,254,.9);
      background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.82));
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.35fr .8fr .9fr;
      gap:1.5rem;
      align-items:start;
    }
    .footer-title{
      font-weight:900;
      color:#453a49;
      margin-bottom:.8rem;
    }
    .footer a{
      color:#6b5d71;
      transition:color .2s ease;
    }
    .footer a:hover{color:#9b2365}
    .copyright{
      margin-top:1.5rem;
      padding-top:1rem;
      border-top:1px solid rgba(245,208,254,.85);
      color:#7c7082;
      font-size:.92rem;
    }
    .field{
      width:100%;
      border-radius:18px;
      border:1px solid rgba(245,208,254,.82);
      background:#fff;
      padding:.85rem .95rem;
      color:var(--text);
      outline:none;
      transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    }
    .field:focus{
      border-color:rgba(236,72,153,.45);
      box-shadow:0 0 0 4px rgba(236,72,153,.08);
    }
    .filter-box{
      background:rgba(255,255,255,.9);
      border:1px solid rgba(245,208,254,.82);
      border-radius:28px;
      box-shadow:var(--shadow-2);
      overflow:hidden;
    }
    .filter-head{
      padding:1.15rem 1.15rem .85rem;
      border-bottom:1px solid rgba(245,208,254,.65);
      background:linear-gradient(135deg, rgba(244,114,182,.08), rgba(167,139,250,.07));
    }
    .filter-body{padding:1.05rem 1.15rem 1.15rem}
    .line-muted{
      border-color:rgba(245,208,254,.75);
    }
    .focus-ring:focus-visible{
      outline:none;
      box-shadow:0 0 0 4px rgba(244,114,182,.14);
    }

    @media (max-width: 1024px){
      .topic-grid{grid-template-columns:1fr 1fr}
      .topic-wide{grid-column:1 / -1}
    }
    @media (max-width: 768px){
      .nav-shell{
        border-radius:28px;
      }
      .hero-title{font-size:clamp(1.9rem, 10vw, 3rem)}
      .info-strip{grid-template-columns:1fr}
      .topic-grid{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr}
    }