/* roulang page: index */
:root{
      --brand:#00A676;
      --brand2:#17B890;
      --accent:#FF8A3D;
      --paper:#F6FAF7;
      --line:#DDE8E1;
      --text:#17201C;
      --subtext:#5B6661;
      --card:#ffffff;
      --shadow:0 8px 24px rgba(23,32,28,.06);
      --shadow-hover:0 12px 32px rgba(23,32,28,.10);
      --radius:12px;
    }
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      background:
        linear-gradient(180deg, rgba(246,250,247,.98), rgba(246,250,247,.94)),
        radial-gradient(circle at top left, rgba(0,166,118,.06), transparent 30%),
        radial-gradient(circle at right 20%, rgba(255,138,61,.05), transparent 22%);
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
      letter-spacing:0;
      line-height:1.75;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:
        linear-gradient(rgba(221,232,225,.55) 1px, transparent 1px),
        linear-gradient(90deg, rgba(221,232,225,.55) 1px, transparent 1px),
        linear-gradient(135deg, transparent 0 48.5%, rgba(0,166,118,.06) 48.5% 49.5%, transparent 49.5% 100%);
      background-size:28px 28px, 28px 28px, 220px 220px;
      mask-image:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.05));
      opacity:.35;
    }
    a,button,input,summary{transition:all .2s ease}
    ::selection{background:rgba(0,166,118,.16)}
    .container-wrap{width:min(1180px,calc(100% - 32px));margin-inline:auto}
    @media (min-width:768px){.container-wrap{width:min(1180px,calc(100% - 48px))}}
    .glassless{
      background:rgba(246,250,247,.92);
      border-bottom:1px solid var(--line);
    }
    .brand-mark{
      width:38px;height:38px;border-radius:11px;
      background:
        linear-gradient(145deg, rgba(0,166,118,.12), rgba(255,138,61,.12)),
        #fff;
      border:1px solid var(--line);
      position:relative;
      box-shadow:var(--shadow);
    }
    .brand-mark::before,
    .brand-mark::after{
      content:"";
      position:absolute;
      inset:9px;
      border-radius:9px;
      border:1.5px solid rgba(23,32,28,.15);
    }
    .brand-mark::after{
      inset:13px;
      border-color:rgba(0,166,118,.55);
      box-shadow:
        10px 0 0 -8px rgba(0,166,118,.7),
        0 10px 0 -8px rgba(0,166,118,.7),
        10px 10px 0 -8px rgba(255,138,61,.75);
    }
    .nav-chip{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.55rem .9rem;
      border-radius:999px;
      border:1px solid transparent;
      color:var(--subtext);
      background:transparent;
      white-space:nowrap;
    }
    .nav-chip:hover{
      background:rgba(0,166,118,.07);
      border-color:rgba(0,166,118,.16);
      color:var(--text);
    }
    .nav-chip.active{
      background:rgba(0,166,118,.12);
      border-color:rgba(0,166,118,.2);
      color:var(--brand);
      font-weight:700;
    }
    .cta-primary{
      display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
      border-radius:12px;
      background:var(--brand);
      color:#fff;
      padding:.9rem 1.25rem;
      font-weight:700;
      box-shadow:var(--shadow);
    }
    .cta-primary:hover{background:#0a8c65;transform:translateY(-1px);box-shadow:var(--shadow-hover)}
    .cta-secondary{
      display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
      border-radius:12px;
      background:#fff;
      color:var(--brand);
      padding:.9rem 1.25rem;
      font-weight:700;
      border:1px solid rgba(0,166,118,.22);
    }
    .cta-secondary:hover{background:rgba(0,166,118,.06);transform:translateY(-1px)}
    .section-title{font-size:clamp(1.5rem,2vw,2rem);line-height:1.2;font-weight:800;letter-spacing:0}
    .section-lead{color:var(--subtext);font-size:1.02rem}
    .panel{
      background:rgba(255,255,255,.96);
      border:1px solid var(--line);
      border-radius:16px;
      box-shadow:var(--shadow);
    }
    .soft-line{border-color:var(--line)}
    .pill{
      display:inline-flex;align-items:center;gap:.4rem;
      border-radius:999px;
      padding:.35rem .7rem;
      border:1px solid rgba(0,166,118,.15);
      background:rgba(0,166,118,.06);
      color:var(--brand);
      font-size:.875rem;
      font-weight:700;
    }
    .pill-accent{
      border-color:rgba(255,138,61,.18);
      background:rgba(255,138,61,.09);
      color:#b85b17;
    }
    .mini-stat{
      border:1px solid var(--line);
      background:#fff;
      border-radius:14px;
      padding:1rem 1.1rem;
    }
    .mini-stat b{display:block;font-size:1.15rem;color:var(--text);line-height:1.2}
    .mini-stat span{color:var(--subtext);font-size:.92rem}
    .step-card, .entry-card, .story-card, .list-card, .faq-card{
      background:#fff;
      border:1px solid var(--line);
      border-radius:12px;
      box-shadow:var(--shadow);
    }
    .step-card:hover, .entry-card:hover, .story-card:hover, .list-card:hover{
      border-color:rgba(0,166,118,.3);
      box-shadow:var(--shadow-hover);
      transform:translateY(-2px);
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      border-radius:999px;
      padding:.24rem .55rem;
      font-size:.78rem;
      font-weight:700;
      letter-spacing:0;
    }
    .tag-green{background:rgba(0,166,118,.12);color:var(--brand)}
    .tag-orange{background:rgba(255,138,61,.14);color:#c5631c}
    .tag-neutral{background:#eef5f0;color:#47635a}
    .progress-track{
      position:relative;
      height:8px;
      background:#e6efe9;
      border-radius:999px;
      overflow:hidden;
    }
    .progress-track::after{
      content:"";
      position:absolute;inset:0 auto 0 0;
      width:78%;
      background:linear-gradient(90deg,var(--brand),var(--brand2));
      border-radius:999px;
    }
    .dot{
      width:12px;height:12px;border-radius:999px;background:#d7e4dd;flex:none;
      box-shadow:0 0 0 4px #fff;
    }
    .dot.on{background:var(--brand)}
    .dot.warn{background:var(--accent)}
    summary::-webkit-details-marker{display:none}
    details[open] .chev{transform:rotate(180deg)}
    .searchbox{
      width:min(360px,100%);
      border:1px solid var(--line);
      background:#fff;
      border-radius:12px;
      padding:.8rem 1rem;
      outline:none;
    }
    .searchbox:focus{
      border-color:rgba(0,166,118,.35);
      box-shadow:0 0 0 4px rgba(0,166,118,.12);
    }
    .channel-scroll{
      overflow-x:auto;
      scrollbar-width:thin;
      scrollbar-color:rgba(0,166,118,.35) transparent;
    }
    .channel-scroll::-webkit-scrollbar{height:6px}
    .channel-scroll::-webkit-scrollbar-thumb{background:rgba(0,166,118,.28);border-radius:999px}
    .subtle-badge{
      display:inline-flex;align-items:center;gap:.35rem;
      border:1px solid rgba(23,32,28,.12);
      background:rgba(255,255,255,.82);
      color:var(--subtext);
      border-radius:999px;
      padding:.42rem .7rem;
      font-size:.85rem;
    }

/* roulang page: category1 */
:root{
      --brand:#00A676;
      --brand-2:#17B890;
      --accent:#FF8A3D;
      --bg:#F6FAF7;
      --surface:#FFFFFF;
      --text:#17201C;
      --subtext:#5B6661;
      --line:#DDE8E1;
      --shadow:0 8px 24px rgba(23,32,28,.06);
      --shadow-hover:0 12px 30px rgba(23,32,28,.10);
      --radius:12px;
      --radius-sm:8px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
      background:
        radial-gradient(circle at 20% 10%, rgba(0,166,118,.05) 0 12%, transparent 13% 100%),
        radial-gradient(circle at 85% 0%, rgba(255,138,61,.04) 0 8%, transparent 9% 100%),
        linear-gradient(180deg, #f7fbf8 0%, #f5faf6 100%);
      color:var(--text);
      line-height:1.75;
      letter-spacing:0;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:
        linear-gradient(rgba(221,232,225,.42) 1px, transparent 1px),
        linear-gradient(90deg, rgba(221,232,225,.42) 1px, transparent 1px);
      background-size:26px 26px;
      opacity:.35;
      mask-image:linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,0));
      -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,0));
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,textarea,select{font:inherit}
    ::selection{background:rgba(0,166,118,.16);color:var(--text)}
    .container-wrap{
      width:min(1180px, calc(100% - 2rem));
      margin-inline:auto;
    }
    .glassless{
      background:rgba(246,250,247,.96);
      border-bottom:1px solid var(--line);
    }
    .brand-mark{
      width:32px;
      height:32px;
      border-radius:10px;
      background:linear-gradient(135deg, rgba(0,166,118,.96), rgba(23,184,144,.92));
      position:relative;
      box-shadow:0 6px 16px rgba(0,166,118,.16);
      flex:0 0 auto;
    }
    .brand-mark::before{
      content:"";
      position:absolute;
      inset:7px;
      border-radius:6px;
      border:2px solid rgba(255,255,255,.95);
    }
    .brand-mark::after{
      content:"";
      position:absolute;
      inset:12px;
      border-radius:4px;
      background:#fff;
      opacity:.88;
    }
    .nav-chip{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.7rem 1rem;
      border-radius:999px;
      border:1px solid transparent;
      color:var(--subtext);
      white-space:nowrap;
      transition:all .2s ease;
      font-weight:700;
    }
    .nav-chip:hover{
      background:#edf7f2;
      color:var(--brand);
      border-color:#cce7dc;
    }
    .nav-chip.active{
      background:rgba(0,166,118,.1);
      color:var(--brand);
      border-color:rgba(0,166,118,.22);
    }
    .searchbox{
      width:100%;
      height:44px;
      border-radius:12px;
      border:1px solid var(--line);
      background:#fff;
      color:var(--text);
      padding:0 1rem;
      outline:none;
      transition:.2s ease;
      box-shadow:none;
    }
    .searchbox::placeholder{color:#7d8984}
    .searchbox:focus{
      border-color:rgba(0,166,118,.45);
      box-shadow:0 0 0 4px rgba(0,166,118,.09);
    }
    .cta-primary,.cta-secondary{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.5rem;
      height:44px;
      padding:0 1.15rem;
      border-radius:12px;
      transition:.2s ease;
      font-weight:700;
      white-space:nowrap;
    }
    .cta-primary{
      background:var(--brand);
      color:#fff;
      box-shadow:0 10px 22px rgba(0,166,118,.18);
    }
    .cta-primary:hover{
      background:#0a956a;
      transform:translateY(-1px);
      box-shadow:0 12px 24px rgba(0,166,118,.24);
    }
    .cta-secondary{
      background:#fff;
      color:var(--brand);
      border:1px solid rgba(0,166,118,.28);
    }
    .cta-secondary:hover{
      background:#effaf5;
      border-color:rgba(0,166,118,.4);
      transform:translateY(-1px);
    }
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      font-size:.85rem;
      color:var(--brand);
      background:rgba(0,166,118,.1);
      border:1px solid rgba(0,166,118,.18);
      border-radius:999px;
      padding:.38rem .78rem;
      font-weight:700;
    }
    .section-title{
      font-size:clamp(1.45rem, 2vw, 2rem);
      line-height:1.25;
      font-weight:800;
      letter-spacing:0;
    }
    .surface{
      background:var(--surface);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
    }
    .surface-hover{
      transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .surface-hover:hover{
      transform:translateY(-2px);
      box-shadow:var(--shadow-hover);
      border-color:rgba(0,166,118,.34);
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:.3rem;
      padding:.32rem .62rem;
      border-radius:999px;
      font-size:.78rem;
      font-weight:700;
      line-height:1.2;
      white-space:nowrap;
    }
    .badge.green{background:rgba(0,166,118,.1);color:var(--brand)}
    .badge.orange{background:rgba(255,138,61,.12);color:#d46a17}
    .badge.gray{background:#f2f6f4;color:#62706b}
    .pill{
      display:inline-flex;
      align-items:center;
      gap:.3rem;
      padding:.42rem .82rem;
      border-radius:999px;
      border:1px solid var(--line);
      background:#fff;
      color:var(--subtext);
      font-size:.85rem;
      transition:.2s ease;
      white-space:nowrap;
    }
    .pill:hover{
      border-color:rgba(0,166,118,.34);
      color:var(--brand);
      background:#eefaf5;
    }
    .check-list li{
      display:flex;
      gap:.7rem;
      align-items:flex-start;
      padding:.65rem 0;
      border-bottom:1px dashed var(--line);
    }
    .check-list li:last-child{border-bottom:none}
    .check-dot{
      flex:0 0 auto;
      width:22px;
      height:22px;
      border-radius:999px;
      display:grid;
      place-items:center;
      background:rgba(0,166,118,.1);
      color:var(--brand);
      font-size:.82rem;
      margin-top:.08rem;
    }
    .mini-note{
      border:1px solid var(--line);
      background:#f6faf7;
      border-radius:12px;
      padding:1rem;
    }
    .entry-card{
      background:#fff;
      border:1px solid var(--line);
      border-radius:12px;
      padding:1rem;
      box-shadow:var(--shadow);
      transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
      position:relative;
      overflow:hidden;
    }
    .entry-card::before{
      content:"";
      position:absolute;
      inset:0 auto 0 0;
      width:4px;
      background:linear-gradient(180deg, var(--brand), var(--brand-2));
      border-radius:12px 0 0 12px;
      opacity:.95;
    }
    .entry-card:hover{
      transform:translateY(-2px);
      border-color:rgba(0,166,118,.35);
      box-shadow:var(--shadow-hover);
    }
    .entry-link{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.45rem;
      padding:.62rem .92rem;
      border-radius:12px;
      border:1px solid rgba(0,166,118,.22);
      color:var(--brand);
      background:#fff;
      font-weight:700;
      transition:.2s ease;
    }
    .entry-link:hover{
      background:#edf8f3;
      border-color:rgba(0,166,118,.36);
    }
    .progress-track{
      position:relative;
      height:6px;
      border-radius:999px;
      background:#e7efea;
      overflow:hidden;
    }
    .progress-fill{
      height:100%;
      width:72%;
      border-radius:inherit;
      background:linear-gradient(90deg, var(--brand), var(--brand-2));
    }
    .progress-node{
      position:relative;
      display:flex;
      flex-direction:column;
      gap:.4rem;
      align-items:flex-start;
    }
    .progress-node::before{
      content:"";
      width:14px;
      height:14px;
      border-radius:999px;
      background:#fff;
      border:3px solid rgba(0,166,118,.28);
      box-shadow:0 0 0 4px rgba(0,166,118,.08);
      margin-top:-10px;
    }
    .progress-node.done::before{
      border-color:var(--brand);
      background:var(--brand);
    }
    .progress-node.wait::before{
      border-color:rgba(255,138,61,.7);
      background:#fff7ef;
    }
    .progress-node .state{
      display:inline-flex;
      align-items:center;
      gap:.3rem;
      padding:.25rem .55rem;
      border-radius:999px;
      background:#f2f6f4;
      color:#66736f;
      font-size:.75rem;
      font-weight:700;
    }
    .faq-item{
      border:1px solid var(--line);
      border-radius:12px;
      background:#fff;
      overflow:hidden;
      transition:.2s ease;
    }
    .faq-item[open]{
      border-color:rgba(0,166,118,.34);
      box-shadow:var(--shadow);
    }
    .faq-item summary{
      list-style:none;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding:1rem 1.1rem;
      font-weight:700;
      color:var(--text);
    }
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item .faq-icon{
      width:28px;
      height:28px;
      border-radius:999px;
      display:grid;
      place-items:center;
      background:#edf7f2;
      color:var(--brand);
      flex:0 0 auto;
      transition:transform .2s ease;
    }
    .faq-item[open] .faq-icon{transform:rotate(45deg)}
    .faq-body{
      padding:0 1.1rem 1rem;
      color:var(--subtext);
    }
    .channel-scroll{
      overflow-x:auto;
      scrollbar-width:thin;
      scrollbar-color:rgba(0,166,118,.25) transparent;
    }
    .channel-scroll::-webkit-scrollbar{height:6px}
    .channel-scroll::-webkit-scrollbar-track{background:transparent}
    .channel-scroll::-webkit-scrollbar-thumb{
      background:rgba(0,166,118,.22);
      border-radius:999px;
    }
    .side-rail{
      position:sticky;
      top:96px;
    }
    .soft-band{
      background:linear-gradient(180deg, #ffffff 0%, #f4faf6 100%);
      border-top:1px solid rgba(221,232,225,.4);
      border-bottom:1px solid rgba(221,232,225,.4);
    }
    @media (max-width: 1024px){
      .side-rail{position:static}
    }