/* roulang page: index */
:root{
      --brand-1:#ec4899;
      --brand-2:#14b8a6;
      --brand-3:#8b5cf6;
      --ink:#17151f;
      --muted:#6b6475;
      --line:#ece7f2;
      --soft:#fff7fb;
      --soft-2:#f3fffc;
      --bg:#fffafb;
      --shadow:0 18px 50px rgba(31,19,43,.08);
      --shadow-sm:0 10px 24px rgba(31,19,43,.07);
      --radius-xl:28px;
      --radius-lg:22px;
      --radius-md:18px;
    }

    html{
      scroll-behavior:smooth;
    }

    body{
      color:var(--ink);
      background:
        radial-gradient(circle at top left, rgba(236,72,153,.08), transparent 30%),
        radial-gradient(circle at top right, rgba(20,184,166,.09), transparent 28%),
        linear-gradient(180deg, #fffafb 0%, #fbfffe 42%, #f8fffd 100%);
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
      letter-spacing:0;
    }

    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:
        linear-gradient(rgba(236,72,153,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20,184,166,.035) 1px, transparent 1px);
      background-size:34px 34px;
      mask-image:linear-gradient(to bottom, rgba(0,0,0,.14), rgba(0,0,0,0));
      opacity:.65;
      z-index:0;
    }

    .site-shell,
    header,
    main,
    footer{
      position:relative;
      z-index:1;
    }

    .container-wrap{
      width:min(100%, 80rem);
      margin:0 auto;
      padding-left:20px;
      padding-right:20px;
    }

    @media (min-width: 768px){
      .container-wrap{
        padding-left:32px;
        padding-right:32px;
      }
    }

    @media (min-width: 1280px){
      .container-wrap{
        padding-left:48px;
        padding-right:48px;
      }
    }

    .glass-line{
      position:relative;
      overflow:hidden;
    }

    .glass-line::before{
      content:"";
      position:absolute;
      left:0;
      top:0;
      width:100%;
      height:3px;
      background:linear-gradient(90deg,var(--brand-1),var(--brand-3),var(--brand-2));
      opacity:.9;
    }

    .brand-gradient{
      background:linear-gradient(135deg,var(--brand-1) 0%, var(--brand-3) 48%, var(--brand-2) 100%);
    }

    .brand-gradient-soft{
      background:linear-gradient(135deg, rgba(236,72,153,.09), rgba(139,92,246,.09), rgba(20,184,166,.09));
    }

    .soft-panel{
      background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86));
      border:1px solid var(--line);
      box-shadow:var(--shadow);
      backdrop-filter:blur(10px);
    }

    .section-gap{
      padding-top:64px;
      padding-bottom:64px;
    }

    @media (min-width: 1024px){
      .section-gap{
        padding-top:96px;
        padding-bottom:96px;
      }
    }

    .card{
      border:1px solid var(--line);
      border-radius:var(--radius-lg);
      background:rgba(255,255,255,.94);
      box-shadow:var(--shadow-sm);
      transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
    }

    .card:hover{
      transform:translateY(-2px);
      box-shadow:var(--shadow);
      border-color:rgba(236,72,153,.28);
    }

    .badge{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      border-radius:999px;
      border:1px solid rgba(236,72,153,.16);
      background:linear-gradient(135deg, rgba(255,255,255,.95), rgba(243,255,252,.9));
      color:#5b5165;
      padding:.45rem .78rem;
      font-size:.84rem;
      line-height:1;
    }

    .badge-soft-pink{
      border-color:rgba(236,72,153,.16);
      background:linear-gradient(135deg, rgba(255,247,251,.96), rgba(255,255,255,.96));
    }

    .badge-soft-green{
      border-color:rgba(20,184,166,.18);
      background:linear-gradient(135deg, rgba(243,255,252,.96), rgba(255,255,255,.96));
    }

    .badge-soft-purple{
      border-color:rgba(139,92,246,.18);
      background:linear-gradient(135deg, rgba(247,243,255,.96), rgba(255,255,255,.96));
    }

    .btn-primary,
    .btn-secondary{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.6rem;
      min-height:48px;
      padding:.85rem 1.35rem;
      border-radius:999px;
      font-weight:700;
      transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
      text-decoration:none;
    }

    .btn-primary{
      color:#fff;
      background:linear-gradient(135deg,var(--brand-1),var(--brand-3),var(--brand-2));
      box-shadow:0 12px 28px rgba(236,72,153,.24);
    }

    .btn-primary:hover{
      transform:translateY(-1px);
      box-shadow:0 18px 36px rgba(236,72,153,.28);
      color:#fff;
    }

    .btn-secondary{
      color:var(--ink);
      background:rgba(255,255,255,.92);
      border:1px solid rgba(236,72,153,.18);
    }

    .btn-secondary:hover{
      transform:translateY(-1px);
      border-color:rgba(20,184,166,.28);
      background:rgba(243,255,252,.96);
      color:var(--ink);
    }

    .mini-link{
      color:#4c4656;
      transition:color .2s ease, transform .2s ease;
    }

    .mini-link:hover{
      color:var(--brand-1);
    }

    .nav-link{
      color:#4d4757;
      font-weight:600;
      transition:color .2s ease, background-color .2s ease;
      border-radius:999px;
      padding:.55rem .9rem;
    }

    .nav-link:hover{
      background:rgba(236,72,153,.06);
      color:var(--brand-1);
    }

    .nav-link[aria-current="page"]{
      background:rgba(236,72,153,.1);
      color:var(--brand-1);
    }

    .search-field{
      min-height:46px;
      border:1px solid var(--line);
      border-radius:999px;
      background:#fff;
      padding:.65rem 1rem;
      transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
    }

    .search-field:focus-within{
      border-color:rgba(236,72,153,.4);
      box-shadow:0 0 0 4px rgba(236,72,153,.1);
    }

    .search-field input{
      width:100%;
      border:0;
      outline:none;
      background:transparent;
      color:var(--ink);
      font-size:.95rem;
    }

    .search-field input::placeholder{
      color:#948aa0;
    }

    .search-field button{
      border:0;
      border-radius:999px;
      padding:.55rem 1rem;
      color:#fff;
      background:linear-gradient(135deg,var(--brand-1),var(--brand-2));
      font-weight:700;
      transition:transform .2s ease, box-shadow .2s ease;
    }

    .search-field button:hover{
      transform:translateY(-1px);
      box-shadow:0 10px 20px rgba(20,184,166,.18);
    }

    .hero-title{
      font-weight:800;
      line-height:1.08;
      letter-spacing:0;
      color:var(--ink);
    }

    .hero-copy{
      color:var(--muted);
      line-height:1.8;
      font-size:1.05rem;
    }

    .subtle-divider{
      height:1px;
      background:linear-gradient(90deg, rgba(236,72,153,.08), rgba(20,184,166,.22), rgba(236,72,153,.08));
    }

    details.faq-card{
      border:1px solid var(--line);
      border-radius:var(--radius-md);
      background:rgba(255,255,255,.95);
      box-shadow:0 8px 24px rgba(31,19,43,.05);
      overflow:hidden;
      transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    }

    details.faq-card:hover{
      border-color:rgba(236,72,153,.22);
      box-shadow:var(--shadow-sm);
    }

    details.faq-card[open]{
      border-color:rgba(236,72,153,.34);
      background:linear-gradient(180deg, rgba(255,247,251,.92), rgba(243,255,252,.92));
    }

    details.faq-card summary{
      list-style:none;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding:1rem 1.1rem;
      min-height:56px;
      font-weight:700;
      color:var(--ink);
    }

    details.faq-card summary::-webkit-details-marker{
      display:none;
    }

    .faq-toggle{
      flex:0 0 auto;
      width:28px;
      height:28px;
      border-radius:999px;
      display:grid;
      place-items:center;
      border:1px solid rgba(236,72,153,.18);
      background:rgba(255,255,255,.95);
      color:var(--brand-1);
      transition:transform .2s ease, background-color .2s ease;
    }

    details[open] .faq-toggle{
      transform:rotate(45deg);
      background:rgba(255,255,255,.98);
    }

    .faq-body{
      padding:0 1.1rem 1.05rem;
      color:#5a5364;
      line-height:1.8;
      font-size:.98rem;
    }

    .news-list a{
      color:var(--ink);
      transition:color .2s ease;
    }

    .news-list a:hover{
      color:var(--brand-1);
    }

    .grid-dash{
      background-image:
        linear-gradient(90deg, rgba(236,72,153,.11) 1px, transparent 1px),
        linear-gradient(rgba(20,184,166,.08) 1px, transparent 1px);
      background-size:24px 24px;
    }

    .mobile-menu{
      border-top:1px solid var(--line);
    }

    .tag-dot{
      width:.45rem;
      height:.45rem;
      border-radius:999px;
      display:inline-block;
      background:linear-gradient(135deg,var(--brand-1),var(--brand-2));
      box-shadow:0 0 0 3px rgba(236,72,153,.08);
    }

    .table-lite{
      border:1px solid var(--line);
      border-radius:var(--radius-lg);
      overflow:hidden;
      background:#fff;
    }

    .table-lite .row{
      display:grid;
      grid-template-columns:minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, .7fr);
      gap:1rem;
      padding:1rem 1.1rem;
      border-top:1px solid var(--line);
    }

    .table-lite .row:first-child{
      border-top:0;
    }

    @media (max-width: 767px){
      .table-lite .row{
        grid-template-columns:1fr;
        gap:.35rem;
      }
    }

/* roulang page: category1 */
:root{
      --brand-1:#ec4899;
      --brand-2:#14b8a6;
      --brand-3:#8b5cf6;
      --ink:#17151f;
      --muted:#6b6475;
      --line:#ece7f2;
      --soft:#fff7fb;
      --soft-2:#f3fffc;
      --paper:#ffffff;
      --shadow:0 18px 50px rgba(31,19,43,.08);
      --shadow-strong:0 24px 64px rgba(31,19,43,.14);
      --radius-xl:28px;
      --radius-lg:22px;
      --radius-md:16px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
      color:var(--ink);
      line-height:1.75;
      background:
        radial-gradient(circle at 12% 4%, rgba(236,72,153,.12), transparent 28%),
        radial-gradient(circle at 88% 10%, rgba(20,184,166,.13), transparent 30%),
        linear-gradient(180deg,#fffafb 0%,#f4fffd 54%,#fff 100%);
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    button,input,textarea{font:inherit}
    button{cursor:pointer}
    img,svg{display:block;max-width:100%}
    ::selection{background:rgba(236,72,153,.18)}
    .container-wrap{
      width:min(100%,1280px);
      margin-inline:auto;
      padding-inline:48px;
    }
    .brand-gradient{
      background:linear-gradient(135deg,var(--brand-1),var(--brand-3) 52%,var(--brand-2));
    }
    .text-gradient{
      background:linear-gradient(120deg,var(--brand-1),var(--brand-3),var(--brand-2));
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }
    .grid-surface{
      position:relative;
      overflow:hidden;
    }
    .grid-surface:before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      opacity:.58;
      background-image:
        linear-gradient(rgba(139,92,246,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20,184,166,.08) 1px, transparent 1px);
      background-size:28px 28px;
      mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.68) 50%,transparent 100%);
    }
    .nav-shell{
      position:sticky;
      top:0;
      z-index:50;
      border-bottom:1px solid rgba(236,231,242,.9);
      background:rgba(255,255,255,.88);
      backdrop-filter:blur(18px);
      box-shadow:0 8px 28px rgba(31,19,43,.04);
    }
    .nav-link{
      position:relative;
      display:inline-flex;
      min-height:42px;
      align-items:center;
      border-radius:999px;
      padding:0 16px;
      font-size:14px;
      font-weight:800;
      color:var(--muted);
      transition:all .22s ease;
    }
    .nav-link:hover{
      color:var(--ink);
      background:linear-gradient(135deg,rgba(236,72,153,.08),rgba(20,184,166,.08));
    }
    .nav-link.active,
    .nav-link[aria-current="page"]{
      color:var(--brand-1);
      background:#fff2f8;
      box-shadow:inset 0 0 0 1px rgba(236,72,153,.16);
    }
    .search-box{
      display:flex;
      align-items:center;
      gap:8px;
      min-height:42px;
      width:220px;
      border:1px solid var(--line);
      border-radius:999px;
      background:#fff;
      padding:0 14px;
      color:var(--muted);
      transition:all .22s ease;
    }
    .search-box:focus-within{
      border-color:rgba(236,72,153,.45);
      box-shadow:0 0 0 4px rgba(236,72,153,.10);
    }
    .search-box input{
      width:100%;
      outline:none;
      border:0;
      background:transparent;
      font-size:13px;
      color:var(--ink);
    }
    .btn{
      display:inline-flex;
      min-height:46px;
      align-items:center;
      justify-content:center;
      gap:8px;
      border-radius:999px;
      padding:12px 20px;
      font-size:15px;
      font-weight:900;
      line-height:1;
      transition:transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
      outline:none;
      white-space:nowrap;
    }
    .btn:focus-visible{
      box-shadow:0 0 0 4px rgba(20,184,166,.18), var(--shadow);
    }
    .btn-primary{
      color:#fff;
      background:linear-gradient(135deg,var(--brand-1),var(--brand-3) 55%,var(--brand-2));
      box-shadow:0 14px 30px rgba(236,72,153,.22);
    }
    .btn-primary:hover{
      transform:translateY(-1px);
      box-shadow:0 18px 42px rgba(139,92,246,.25);
      background:linear-gradient(145deg,var(--brand-1),var(--brand-3) 45%,var(--brand-2));
    }
    .btn-secondary{
      border:1px solid rgba(236,72,153,.24);
      color:var(--ink);
      background:#fff;
    }
    .btn-secondary:hover{
      transform:translateY(-1px);
      border-color:rgba(20,184,166,.36);
      background:linear-gradient(135deg,#fff7fb,#f3fffc);
      box-shadow:var(--shadow);
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:6px;
      width:max-content;
      border:1px solid rgba(236,72,153,.18);
      border-radius:999px;
      background:#fff;
      padding:6px 10px;
      font-size:12px;
      font-weight:800;
      color:var(--muted);
      line-height:1.1;
    }
    .badge:before{
      content:"";
      width:7px;
      height:7px;
      border-radius:999px;
      background:linear-gradient(135deg,var(--brand-1),var(--brand-2));
    }
    .tag{
      display:inline-flex;
      align-items:center;
      border-radius:999px;
      padding:7px 11px;
      background:linear-gradient(135deg,rgba(236,72,153,.09),rgba(20,184,166,.09));
      color:#5b5367;
      font-size:12px;
      font-weight:900;
      border:1px solid rgba(236,231,242,.85);
      white-space:nowrap;
    }
    .section{
      padding-block:82px;
    }
    .section-tight{
      padding-block:54px;
    }
    .hero-card,.surface-card,.list-card,.notice-card,.faq-card{
      border:1px solid var(--line);
      background:rgba(255,255,255,.86);
      box-shadow:var(--shadow);
    }
    .hero-card{
      border-radius:var(--radius-xl);
    }
    .surface-card{
      border-radius:var(--radius-xl);
    }
    .list-card{
      position:relative;
      overflow:hidden;
      border-radius:24px;
      transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }
    .list-card:before{
      content:"";
      position:absolute;
      inset:0 0 auto 0;
      height:3px;
      background:linear-gradient(90deg,var(--brand-1),var(--brand-2));
      transform:scaleX(0);
      transform-origin:left;
      transition:transform .22s ease;
    }
    .list-card:hover{
      transform:translateY(-2px);
      border-color:rgba(236,72,153,.32);
      box-shadow:var(--shadow-strong);
    }
    .list-card:hover:before{transform:scaleX(1)}
    .index-pill{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      border:1px solid rgba(236,231,242,.9);
      border-radius:18px;
      background:#fff;
      padding:14px;
      transition:all .22s ease;
    }
    .index-pill:hover{
      border-color:rgba(20,184,166,.35);
      transform:translateY(-1px);
      box-shadow:0 12px 30px rgba(20,184,166,.10);
    }
    .step-line{
      position:relative;
    }
    .step-line:after{
      content:"";
      position:absolute;
      top:31px;
      left:32px;
      bottom:-34px;
      width:1px;
      background:linear-gradient(180deg,rgba(236,72,153,.42),rgba(20,184,166,.18));
    }
    .step-line:last-child:after{display:none}
    details.faq-item{
      border:1px solid var(--line);
      border-radius:22px;
      background:#fff;
      box-shadow:0 14px 34px rgba(31,19,43,.055);
      overflow:hidden;
      transition:all .22s ease;
    }
    details.faq-item[open]{
      border-color:rgba(236,72,153,.32);
      background:linear-gradient(135deg,#fff,#fff7fb 48%,#f3fffc);
      box-shadow:var(--shadow);
    }
    details.faq-item summary{
      list-style:none;
      min-height:64px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:18px 22px;
      font-weight:900;
      cursor:pointer;
    }
    details.faq-item summary::-webkit-details-marker{display:none}
    details.faq-item summary:after{
      content:"+";
      display:grid;
      place-items:center;
      flex:0 0 auto;
      width:30px;
      height:30px;
      border-radius:999px;
      color:#fff;
      background:linear-gradient(135deg,var(--brand-1),var(--brand-2));
      font-weight:900;
      transition:transform .22s ease;
    }
    details.faq-item[open] summary:after{
      content:"";
      transform:rotate(45deg);
      background:
        linear-gradient(#fff,#fff) center/12px 2px no-repeat,
        linear-gradient(#fff,#fff) center/2px 12px no-repeat,
        linear-gradient(135deg,var(--brand-1),var(--brand-2));
    }
    .mini-link{
      color:var(--muted);
      transition:color .2s ease, transform .2s ease;
      display:inline-flex;
    }
    .mini-link:hover{
      color:var(--brand-1);
      transform:translateX(2px);
    }
    .subtle-divider{
      height:1px;
      background:linear-gradient(90deg,transparent,var(--line),transparent);
    }
    .mobile-panel{
      display:none;
      border-top:1px solid var(--line);
      background:#fff;
    }
    .mobile-panel.open{display:block}
    .filter-strip{
      display:flex;
      gap:10px;
      overflow-x:auto;
      padding-bottom:8px;
      scrollbar-width:thin;
      scrollbar-color:rgba(236,72,153,.35) transparent;
    }
    .filter-btn{
      flex:0 0 auto;
      border:1px solid var(--line);
      border-radius:999px;
      background:#fff;
      padding:10px 14px;
      font-size:14px;
      font-weight:900;
      color:var(--muted);
      transition:all .2s ease;
    }
    .filter-btn:hover,.filter-btn.active{
      color:var(--brand-1);
      border-color:rgba(236,72,153,.32);
      background:#fff2f8;
      box-shadow:0 10px 24px rgba(236,72,153,.10);
    }
    .form-field{
      width:100%;
      min-height:50px;
      border:1px solid var(--line);
      border-radius:18px;
      background:#fff;
      padding:12px 15px;
      outline:none;
      color:var(--ink);
      transition:all .2s ease;
    }
    .form-field:focus{
      border-color:rgba(20,184,166,.45);
      box-shadow:0 0 0 4px rgba(20,184,166,.12);
    }
    textarea.form-field{min-height:110px;resize:vertical}
    @media (max-width:1024px){
      .container-wrap{padding-inline:32px}
      .section{padding-block:68px}
      .search-box{width:190px}
    }
    @media (max-width:768px){
      .container-wrap{padding-inline:20px}
      .section{padding-block:58px}
      .section-tight{padding-block:44px}
      .btn{width:100%;white-space:normal}
      .hero-title{font-size:38px!important;line-height:1.12!important}
      .step-line:after{left:25px}
    }
    @media (max-width:520px){
      .container-wrap{padding-inline:18px}
      .hero-title{font-size:34px!important}
      details.faq-item summary{padding:16px 18px}
      .surface-card,.hero-card{border-radius:24px}
    }