/* roulang page: index */
:root{
      --berry:#5b173d;
      --wine:#7b2048;
      --coral:#e76b68;
      --peach:#ffb29f;
      --cream:#fff9f4;
      --lavender:#f8f1f6;
      --ink:#2d1521;
      --muted:#725d69;
      --line:#ead9e1;
      --white:#ffffff;
      --radius-xl:30px;
      --radius-lg:22px;
      --radius-md:16px;
      --shadow:0 18px 50px rgba(113,35,71,.12);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--ink);
      background:linear-gradient(180deg,#fffaf6 0%,#fff 32%,#fdf7fa 100%);
      font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Arial,sans-serif;
      line-height:1.72;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    button,input{font:inherit}
    button{cursor:pointer}
    img{max-width:100%;display:block}
    ::selection{background:#ffd4cf;color:#571231}
    .shell{width:min(1240px,calc(100% - 48px));margin:0 auto}
    .gradient-text{
      background:linear-gradient(100deg,var(--berry),var(--coral));
      -webkit-background-clip:text;background-clip:text;color:transparent;
    }
    .brand-gradient{background:linear-gradient(115deg,var(--berry) 0%,var(--wine) 45%,var(--coral) 100%)}
    .soft-grid{
      background-image:linear-gradient(rgba(121,36,75,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(121,36,75,.045) 1px,transparent 1px);
      background-size:30px 30px;
    }
    .top-notice{
      background:#3d102b;color:#f9dce4;font-size:12px;letter-spacing:.02em;
    }
    .site-header{
      position:sticky;top:0;z-index:40;
      background:rgba(255,250,246,.91);
      backdrop-filter:blur(16px);
      border-bottom:1px solid rgba(234,217,225,.8);
    }
    .site-header:after{
      content:"";display:block;height:2px;
      background:linear-gradient(90deg,transparent,var(--coral),var(--peach),transparent);
      opacity:.65;
    }
    .logo-mark{
      width:38px;height:38px;border-radius:13px;
      display:grid;place-items:center;color:#fff;
      background:linear-gradient(135deg,var(--berry),var(--coral));
      box-shadow:0 8px 20px rgba(123,32,72,.25);
      flex:0 0 auto;
    }
    .nav-link{
      position:relative;color:#695361;font-size:14px;font-weight:650;
      padding:9px 2px;transition:.22s ease;
    }
    .nav-link:hover,.nav-link.active{color:var(--berry)}
    .nav-link.active:after{
      content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
      background:linear-gradient(90deg,var(--berry),var(--coral));border-radius:20px;
    }
    .searchbox{
      height:42px;width:190px;border:1px solid var(--line);border-radius:14px;
      background:#fff;padding:0 13px;color:var(--ink);outline:none;
      transition:.2s ease;
    }
    .searchbox:focus{width:230px;border-color:#c86e90;box-shadow:0 0 0 4px rgba(200,110,144,.14)}
    .searchbox::placeholder{color:#a48b99;font-size:13px}
    .btn{
      min-height:44px;border-radius:14px;padding:0 17px;display:inline-flex;
      align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:700;
      border:1px solid transparent;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
    }
    .btn:hover{transform:translateY(-2px)}
    .btn:active{transform:translateY(0)}
    .btn:focus-visible,.searchbox:focus-visible,.faq-button:focus-visible{outline:3px solid rgba(231,107,104,.35);outline-offset:3px}
    .btn-primary{color:#fff;background:linear-gradient(110deg,var(--berry),var(--wine) 45%,var(--coral));box-shadow:0 10px 22px rgba(123,32,72,.22)}
    .btn-primary:hover{box-shadow:0 15px 28px rgba(123,32,72,.3);filter:brightness(1.05)}
    .btn-secondary{color:var(--berry);background:#fff;border-color:#e8cdd8}
    .btn-secondary:hover{background:#fff4f3;border-color:#d7aab9}
    .btn-ghost{color:#fff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.32)}
    .btn-ghost:hover{background:rgba(255,255,255,.23)}
    .badge{
      display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;
      font-size:12px;font-weight:700;line-height:1;background:#fff;color:var(--wine);border:1px solid #efd9e3;
    }
    .badge-dot:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--coral);display:block}
    .section{padding:84px 0}
    .eyebrow{
      display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;
      background:#f8e8ee;color:var(--wine);font-size:12px;font-weight:800;letter-spacing:.06em;
    }
    .eyebrow:before{content:"";width:7px;height:7px;background:var(--coral);border-radius:50%}
    .section-title{font-size:clamp(28px,3.2vw,43px);line-height:1.2;letter-spacing:-.04em;font-weight:850;margin:16px 0 12px}
    .section-desc{max-width:680px;color:var(--muted);font-size:15px;margin:0}
    .panel{
      background:rgba(255,255,255,.9);border:1px solid rgba(231,211,220,.9);
      box-shadow:var(--shadow);border-radius:var(--radius-xl);
    }
    .cover{
      position:relative;overflow:hidden;background:linear-gradient(135deg,#5b173d,#b64a66 54%,#ffae98);
    }
    .cover:before{
      content:"";position:absolute;width:140%;height:72%;left:-24%;bottom:-18%;
      border-radius:50%;background:rgba(255,245,239,.2);transform:rotate(-12deg);
    }
    .cover:after{
      content:"";position:absolute;width:42%;aspect-ratio:1;border-radius:50%;
      top:13%;right:12%;background:rgba(255,232,221,.23);box-shadow:0 0 0 18px rgba(255,232,221,.08);
    }
    .cover-alt{background:linear-gradient(135deg,#882950,#ea756e 55%,#ffc1a5)}
    .cover-dark{background:linear-gradient(135deg,#2b1025,#6c1e47 60%,#b85967)}
    .cover-sand{background:linear-gradient(135deg,#8d3b53,#d97973 48%,#e9bc9d)}
    .cover-label{position:absolute;z-index:2;left:18px;bottom:16px;color:#fff;font-size:12px;font-weight:750;letter-spacing:.08em}
    .muted-line{height:1px;background:linear-gradient(90deg,transparent,#ead9e1,transparent)}
    .feature-row{transition:.22s ease}
    .feature-row:hover{background:#fff7f6;transform:translateX(3px)}
    .feature-icon{
      width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
      background:#f9e9ed;color:var(--wine);font-size:18px;flex:0 0 auto;
    }
    .mini-chart{height:76px;display:flex;align-items:end;gap:7px}
    .mini-chart span{flex:1;border-radius:9px 9px 3px 3px;background:linear-gradient(180deg,var(--peach),var(--wine))}
    .quote-card{transition:.25s ease}
    .quote-card:hover{transform:translateY(-5px);box-shadow:0 20px 42px rgba(103,35,65,.13)}
    .avatar{
      width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
      font-size:14px;font-weight:800;color:#fff;background:linear-gradient(135deg,#8e3154,#f08a76);
    }
    .info-link{transition:.2s ease}
    .info-link:hover{color:var(--wine);padding-left:5px}
    .faq-item{border-bottom:1px solid var(--line)}
    .faq-button{width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;padding:21px 0;color:var(--ink);font-size:16px;font-weight:760;background:transparent;border:0}
    .faq-icon{width:26px;height:26px;flex:0 0 auto;border-radius:9px;background:#f9e8ee;color:var(--wine);display:grid;place-items:center;transition:.25s ease}
    .faq-answer{display:none;padding:0 42px 21px 0;color:var(--muted);font-size:14px}
    .faq-item.open .faq-answer{display:block}
    .faq-item.open .faq-icon{transform:rotate(45deg);background:var(--wine);color:#fff}
    .footer-link{color:#e8cbd6;font-size:14px;transition:.2s ease}
    .footer-link:hover{color:#fff;padding-left:3px}
    .mobile-menu{display:none}
    .modal-backdrop{
      position:fixed;inset:0;background:rgba(42,10,29,.62);backdrop-filter:blur(7px);
      z-index:90;display:flex;align-items:center;justify-content:center;padding:18px;
    }
    .modal-card{width:min(480px,100%);border-radius:28px;background:#fffaf7;padding:32px;box-shadow:0 30px 90px rgba(31,4,20,.35)}
    .hide-modal{display:none!important}
    @media(max-width:1024px){
      .desktop-nav,.header-search,.header-actions{display:none}
      .mobile-trigger{display:inline-flex}
      .mobile-menu.show{display:block}
      .section{padding:68px 0}
    }
    @media(max-width:768px){
      .shell{width:min(100% - 32px,1240px)}
      .section{padding:56px 0}
      .section-title{font-size:30px}
      .searchbox{width:100%}
      .modal-card{padding:25px}
    }
    @media(max-width:520px){
      .top-notice{font-size:11px}
      .btn{width:100%}
      .section-title{font-size:28px}
      .panel{border-radius:22px}
    }

/* roulang page: category1 */
:root{
      --berry:#5b173d;--wine:#7b2048;--coral:#e76b68;--peach:#ffb29f;
      --cream:#fff9f4;--lavender:#f8f1f6;--ink:#2d1521;--muted:#725d69;
      --line:#ead9e1;--white:#fff;--radius-xl:30px;--radius-lg:22px;
      --radius-md:16px;--shadow:0 18px 50px rgba(113,35,71,.12)
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;color:var(--ink);background:linear-gradient(180deg,#fffaf6 0%,#fff 32%,#fdf7fa 100%);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Arial,sans-serif;line-height:1.72;overflow-x:hidden}
    a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}img{max-width:100%;display:block}
    .shell{width:min(1240px,calc(100% - 64px));margin:0 auto}
    .brand-gradient{background:linear-gradient(115deg,var(--berry),var(--wine) 46%,var(--coral))}
    .soft-grid{background-image:linear-gradient(rgba(121,36,75,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(121,36,75,.045) 1px,transparent 1px);background-size:30px 30px}
    .site-header{position:sticky;top:0;z-index:40;background:rgba(255,250,246,.92);backdrop-filter:blur(16px);border-bottom:1px solid rgba(234,217,225,.8)}
    .site-header:after{content:"";display:block;height:2px;background:linear-gradient(90deg,transparent,var(--coral),var(--peach),transparent);opacity:.65}
    .logo-mark{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--berry),var(--coral));box-shadow:0 8px 20px rgba(123,32,72,.25);flex:0 0 auto}
    .nav-link{position:relative;color:#695361;font-size:14px;font-weight:650;padding:9px 2px;transition:.22s ease}
    .nav-link:hover,.nav-link.active{color:var(--berry)}
    .nav-link.active:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--berry),var(--coral));border-radius:20px}
    .searchbox{height:42px;width:190px;border:1px solid var(--line);border-radius:14px;background:#fff;padding:0 13px;color:var(--ink);outline:none;transition:.2s ease}
    .searchbox:focus{width:230px;border-color:#c86e90;box-shadow:0 0 0 4px rgba(200,110,144,.14)}
    .searchbox::placeholder{color:#a48b99;font-size:13px}
    .btn{min-height:44px;border-radius:14px;padding:0 17px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:700;border:1px solid transparent;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
    .btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0)}
    .btn:focus-visible,.searchbox:focus-visible,.filter-control:focus-visible,.faq-button:focus-visible{outline:3px solid rgba(231,107,104,.35);outline-offset:3px}
    .btn-primary{color:#fff;background:linear-gradient(110deg,var(--berry),var(--wine) 45%,var(--coral));box-shadow:0 10px 22px rgba(123,32,72,.22)}
    .btn-primary:hover{box-shadow:0 15px 28px rgba(123,32,72,.3);filter:brightness(1.05)}
    .btn-secondary{color:var(--berry);background:#fff;border-color:#e8cdd8}.btn-secondary:hover{background:#fff4f3;border-color:#d7aab9}
    .badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700;line-height:1;background:#fff;color:var(--wine);border:1px solid #efd9e3}
    .badge-dot:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--coral);display:block}
    .section{padding:76px 0}.eyebrow{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;background:#f8e8ee;color:var(--wine);font-size:12px;font-weight:800;letter-spacing:.06em}
    .eyebrow:before{content:"";width:7px;height:7px;background:var(--coral);border-radius:50%}
    .section-title{font-size:clamp(30px,3.2vw,43px);line-height:1.2;letter-spacing:-.04em;font-weight:850;margin:16px 0 12px}
    .section-desc{max-width:680px;color:var(--muted);font-size:15px;margin:0}
    .panel{border:1px solid var(--line);border-radius:var(--radius-xl);background:rgba(255,255,255,.85);box-shadow:var(--shadow)}
    .filter-panel{position:sticky;top:104px}.filter-control{border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--muted);padding:9px 12px;transition:.2s ease}
    .filter-control:hover,.filter-control.selected{border-color:#d58ba2;background:#fff4f3;color:var(--berry)}
    .content-card{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;box-shadow:0 12px 32px rgba(113,35,71,.08);transition:.25s ease}
    .content-card:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(113,35,71,.15)}
    .cover{height:210px;position:relative;overflow:hidden;background:linear-gradient(140deg,#6b2350,#d76c73 58%,#ffc0a8)}
    .cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(45,21,33,.45))}
    .cover-orb{position:absolute;width:150px;height:210px;border-radius:50%;background:rgba(255,230,215,.25);filter:blur(1px);transform:translate(55px,18px) rotate(18deg)}
    .cover-copy{position:absolute;left:18px;bottom:15px;z-index:2;color:#fff;font-size:13px;font-weight:700}
    .faq-item{border-bottom:1px solid var(--line)}.faq-button{width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;padding:21px 0;color:var(--ink);font-size:16px;font-weight:760;background:transparent;border:0}
    .faq-icon{width:26px;height:26px;flex:0 0 auto;border-radius:9px;background:#f9e8ee;color:var(--wine);display:grid;place-items:center;transition:.25s ease}
    .faq-answer{display:none;padding:0 42px 21px 0;color:var(--muted);font-size:14px}.faq-item.open .faq-answer{display:block}.faq-item.open .faq-icon{transform:rotate(45deg);background:var(--wine);color:#fff}
    .footer-link{color:#e8cbd6;font-size:14px;transition:.2s ease}.footer-link:hover{color:#fff;padding-left:3px}
    .mobile-menu{display:none}.mobile-menu.show{display:block}
    @media(max-width:1024px){.desktop-nav,.header-search,.header-actions{display:none}.mobile-trigger{display:inline-flex}}
    @media(min-width:1025px){.desktop-nav,.header-search,.header-actions{display:flex}.mobile-trigger{display:none}}
    @media(max-width:768px){.shell{width:min(100% - 32px,1240px)}.section{padding:56px 0}.filter-panel{position:static}.searchbox{width:100%}}
    @media(max-width:520px){.shell{width:calc(100% - 32px)}.section-title{font-size:28px}.btn{width:100%}.panel{border-radius:22px}.cover{height:190px}}

/* roulang page: category2 */
:root{
 --berry:#5b173d;--wine:#7b2048;--coral:#e76b68;--peach:#ffb29f;
 --cream:#fff9f4;--lavender:#f8f1f6;--ink:#2d1521;--muted:#725d69;
 --line:#ead9e1;--white:#fff;--radius-xl:30px;--radius-lg:22px;
 --radius-md:16px;--shadow:0 18px 50px rgba(113,35,71,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:linear-gradient(180deg,#fffaf6 0%,#fff 34%,#fdf7fa 100%);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Arial,sans-serif;line-height:1.72;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}
img{max-width:100%;display:block}
.shell{width:min(calc(100% - 64px),1240px);margin:0 auto}
.site-header{position:sticky;top:0;z-index:40;background:rgba(255,250,246,.92);backdrop-filter:blur(16px);border-bottom:1px solid rgba(234,217,225,.8)}
.site-header:after{content:"";display:block;height:2px;background:linear-gradient(90deg,transparent,var(--coral),var(--peach),transparent);opacity:.65}
.logo-mark{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--berry),var(--coral));box-shadow:0 8px 20px rgba(123,32,72,.25);flex:0 0 auto}
.nav-link{position:relative;color:#695361;font-size:14px;font-weight:650;padding:9px 2px;transition:.22s ease}
.nav-link:hover,.nav-link.active{color:var(--berry)}
.nav-link.active:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--berry),var(--coral));border-radius:20px}
.searchbox{height:42px;width:190px;border:1px solid var(--line);border-radius:14px;background:#fff;padding:0 13px;color:var(--ink);outline:none;transition:.2s ease}
.searchbox:focus{width:230px;border-color:#c86e90;box-shadow:0 0 0 4px rgba(200,110,144,.14)}
.searchbox::placeholder{color:#a48b99;font-size:13px}
.btn{min-height:44px;border-radius:14px;padding:0 17px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:700;border:1px solid transparent;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible,.searchbox:focus-visible,.filter-button:focus-visible{outline:3px solid rgba(231,107,104,.35);outline-offset:3px}
.btn-primary{color:#fff;background:linear-gradient(110deg,var(--berry),var(--wine) 45%,var(--coral));box-shadow:0 10px 22px rgba(123,32,72,.22)}
.btn-primary:hover{box-shadow:0 15px 28px rgba(123,32,72,.3);filter:brightness(1.05)}
.btn-secondary{color:var(--berry);background:#fff;border-color:#e8cdd8}
.btn-secondary:hover{background:#fff4f3;border-color:#d7aab9}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700;line-height:1;background:#fff;color:var(--wine);border:1px solid #efd9e3}
.badge-dot:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--coral);display:block}
.eyebrow{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;background:#f8e8ee;color:var(--wine);font-size:12px;font-weight:800;letter-spacing:.06em}
.eyebrow:before{content:"";width:7px;height:7px;background:var(--coral);border-radius:50%}
.section{padding:76px 0}
.section-title{font-size:clamp(28px,3.2vw,43px);line-height:1.2;letter-spacing:-.04em;font-weight:850;margin:16px 0 12px}
.section-desc{max-width:680px;color:var(--muted);font-size:15px;margin:0}
.brand-gradient{background:linear-gradient(115deg,var(--berry) 0%,var(--wine) 45%,var(--coral) 100%)}
.soft-grid{background-image:linear-gradient(rgba(121,36,75,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(121,36,75,.045) 1px,transparent 1px);background-size:30px 30px}
.panel{border:1px solid var(--line);border-radius:var(--radius-xl);background:rgba(255,255,255,.86);box-shadow:var(--shadow)}
.filter-button{border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:12px;padding:9px 13px;font-size:13px;transition:.2s ease}
.filter-button:hover,.filter-button.active{background:#f9e9ed;border-color:#d9aabd;color:var(--berry)}
.content-card{border:1px solid var(--line);border-radius:22px;background:#fff;overflow:hidden;transition:.25s ease}
.content-card:hover{transform:translateY(-5px);box-shadow:0 20px 42px rgba(103,35,65,.13);border-color:#dfb7c5}
.cover{height:188px;position:relative;overflow:hidden}
.cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(45,21,33,.45))}
.cover-a{background:radial-gradient(circle at 22% 25%,#ffc8b4 0 10%,transparent 11%),linear-gradient(135deg,#642047,#d96b6c)}
.cover-b{background:radial-gradient(circle at 70% 30%,#ffe1bd 0 13%,transparent 14%),linear-gradient(135deg,#8e3e63,#f2a18d)}
.cover-c{background:radial-gradient(circle at 35% 65%,#f8c6d0 0 12%,transparent 13%),linear-gradient(135deg,#3e2349,#b94e66)}
.cover-d{background:radial-gradient(circle at 75% 62%,#ffd0a9 0 11%,transparent 12%),linear-gradient(135deg,#71304f,#ef8a79)}
.avatar{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;color:#fff;font-weight:850;background:linear-gradient(135deg,#6d2552,#eb8278)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-button{width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;padding:21px 0;color:var(--ink);font-size:16px;font-weight:760;background:transparent;border:0}
.faq-icon{width:26px;height:26px;flex:0 0 auto;border-radius:9px;background:#f9e8ee;color:var(--wine);display:grid;place-items:center;transition:.25s ease}
.faq-answer{display:none;padding:0 42px 21px 0;color:var(--muted);font-size:14px}
.faq-item.open .faq-answer{display:block}
.faq-item.open .faq-icon{transform:rotate(45deg);background:var(--wine);color:#fff}
.footer-link{color:#e8cbd6;font-size:14px;transition:.2s ease}
.footer-link:hover{color:#fff;padding-left:3px}
.mobile-menu{display:none}
.mobile-menu.show{display:block}
.desktop-nav,.header-search,.header-actions{display:flex}
@media(max-width:1024px){.desktop-nav,.header-search,.header-actions{display:none}.mobile-trigger{display:inline-flex}}
@media(max-width:768px){.shell{width:min(100% - 32px,1240px)}.section{padding:56px 0}.searchbox{width:100%}.desktop-nav,.header-search,.header-actions{display:none}.result-grid{grid-template-columns:1fr}.filter-panel{position:static}}
@media(max-width:520px){.section-title{font-size:28px}.btn{width:100%}.cover{height:170px}}