/* roulang page: index */
:root{
      --bg:#f7f4ee;
      --bg-soft:#fcfaf6;
      --panel:#ffffff;
      --text:#1f1d1a;
      --muted:#6f665b;
      --line:#e6ddd1;
      --accent:#e75b2d;
      --accent-2:#ff7a1a;
      --gold:#d9aa4b;
      --ok:#1f8d58;
      --shadow:0 14px 40px rgba(36, 28, 20, 0.08);
      --radius:8px;
    }
    html{scroll-behavior:smooth;}
    body{
      background:var(--bg);
      color:var(--text);
      font-family: Inter, system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height:1.65;
    }
    *{box-sizing:border-box;}
    ::selection{background:rgba(231,91,45,.18);color:var(--text);}
    a{color:inherit;text-decoration:none;}
    img{max-width:100%;display:block;}
    button,input,textarea,select{font:inherit;}
    details summary::-webkit-details-marker{display:none;}
    summary{list-style:none;}
    .shell{
      min-height:100vh;
      background:
        linear-gradient(180deg, rgba(255,122,26,0.08), rgba(255,255,255,0) 26%),
        linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0));
    }
    .panel{
      background:rgba(255,255,255,.96);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
    }
    .soft-panel{
      background:linear-gradient(180deg, #fff, #fffdf8);
      border:1px solid var(--line);
      border-radius:var(--radius);
    }
    .section-title{
      letter-spacing:0;
      line-height:1.15;
    }
    .section-lead{
      color:var(--muted);
      max-width:44rem;
    }
    .kicker{
      color:var(--accent);
      background:rgba(231,91,45,.1);
      border:1px solid rgba(231,91,45,.16);
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      border-radius:999px;
      border:1px solid var(--line);
      background:#fff;
      color:#594f45;
    }
    .metric{
      border:1px solid var(--line);
      background:linear-gradient(180deg, #fff, #fffaf4);
      border-radius:var(--radius);
    }
    .metric-value{
      color:var(--accent);
      letter-spacing:0;
    }
    .link-row{
      transition:transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
    }
    .link-row:hover{
      transform:translateY(-1px);
      border-color:rgba(231,91,45,.26);
      box-shadow:0 10px 24px rgba(231,91,45,.08);
      background:#fffdf9;
    }
    .input-field, .textarea-field{
      width:100%;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:#fff;
      color:var(--text);
      padding:.85rem 1rem;
      outline:none;
      transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    }
    .input-field:focus, .textarea-field:focus{
      border-color:rgba(231,91,45,.5);
      box-shadow:0 0 0 4px rgba(231,91,45,.12);
    }
    .textarea-field{min-height:120px;resize:vertical;}
    .ring-progress{
      width:148px;
      height:148px;
      border-radius:50%;
      padding:14px;
      background:conic-gradient(var(--accent) 0 calc(var(--value) * 1%), #f1e5d8 calc(var(--value) * 1%) 100%);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.72);
    }
    .ring-progress .inner{
      height:100%;
      border-radius:50%;
      background:linear-gradient(180deg, #ffffff, #fff6ee);
      border:1px solid var(--line);
      display:flex;
      align-items:center;
      justify-content:center;
      flex-direction:column;
      text-align:center;
    }
    .tabbar{
      height:72px;
      padding-bottom:env(safe-area-inset-bottom);
    }
    .tabbar a{
      border-radius:12px;
      transition:background-color .18s ease, color .18s ease, transform .18s ease;
    }
    .tabbar a:hover{
      transform:translateY(-1px);
      background:rgba(231,91,45,.06);
    }
    .tab-active{
      background:rgba(231,91,45,.1);
      color:var(--accent);
    }
    .nav-link{
      position:relative;
      color:#4d453d;
      transition:color .18s ease;
    }
    .nav-link:hover{color:var(--accent);}
    .nav-link.active{
      color:var(--accent);
    }
    .nav-link.active::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:-18px;
      height:2px;
      background:var(--accent);
      border-radius:999px;
    }
    .toast{
      transition:opacity .25s ease, transform .25s ease;
    }
    @media (max-width: 768px){
      .hide-mobile{display:none !important;}
    }

/* roulang page: category1 */
:root{
            --bg:#f8fafc;
            --surface:#ffffff;
            --surface-soft:#fff8f1;
            --line:#e5e7eb;
            --text:#0f172a;
            --muted:#64748b;
            --accent:#ea580c;
            --accent-2:#dc2626;
            --accent-soft:#fff1e6;
            --gold:#b7791f;
            --shadow:0 16px 40px rgba(15, 23, 42, 0.08);
            --shadow-soft:0 10px 28px rgba(15, 23, 42, 0.06);
            --radius:8px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
            color:var(--text);
            background:
                linear-gradient(180deg,#f8fafc 0%,#ffffff 100%);
            letter-spacing:0;
        }
        a{color:inherit;text-decoration:none}
        img{max-width:100%;display:block}
        button,input,select,textarea{font:inherit}
        ::selection{background:rgba(234,88,12,.18);color:#111827}
        :focus-visible{outline:2px solid rgba(234,88,12,.35);outline-offset:2px}
        .panel{
            background:var(--surface);
            border:1px solid var(--line);
            border-radius:var(--radius);
            box-shadow:var(--shadow-soft);
        }
        .soft-panel{
            background:linear-gradient(180deg,#ffffff 0%,#fff8f1 100%);
            border:1px solid rgba(234,88,12,.16);
        }
        .nav-link{
            color:#334155;
            transition:all .2s ease;
        }
        .nav-link:hover,.nav-link.active{
            color:var(--accent);
        }
        .nav-pill{
            border:1px solid var(--line);
            background:#fff;
            border-radius:var(--radius);
            transition:all .2s ease;
        }
        .nav-pill:hover{
            border-color:rgba(234,88,12,.35);
            box-shadow:0 8px 18px rgba(15,23,42,.06);
        }
        .chip{
            display:inline-flex;
            align-items:center;
            gap:.45rem;
            border:1px solid var(--line);
            border-radius:999px;
            background:#fff;
            color:#334155;
            transition:all .2s ease;
        }
        .chip:hover,.chip.active{
            border-color:rgba(234,88,12,.35);
            color:var(--accent);
            background:var(--accent-soft);
        }
        .item-card{
            transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
        }
        .item-card:hover{
            transform:translateY(-2px);
            border-color:rgba(234,88,12,.35);
            box-shadow:0 14px 30px rgba(15,23,42,.08);
        }
        .tab-active{
            color:var(--accent);
            background:linear-gradient(180deg,#fff8ef 0%,#ffffff 100%);
            border-top:2px solid var(--accent);
        }
        .badge-dot{
            width:.5rem;height:.5rem;border-radius:999px;background:var(--accent);
            box-shadow:0 0 0 4px rgba(234,88,12,.12);
        }
        .field{
            width:100%;
            border:1px solid var(--line);
            border-radius:var(--radius);
            background:#fff;
            color:var(--text);
            padding:.8rem .9rem;
            transition:border-color .2s ease, box-shadow .2s ease;
        }
        .field:focus{
            border-color:rgba(234,88,12,.45);
            box-shadow:0 0 0 3px rgba(234,88,12,.10);
            outline:none;
        }
        .btn-main{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:.45rem;
            border-radius:var(--radius);
            border:1px solid transparent;
            background:linear-gradient(180deg,var(--accent) 0%,var(--accent-2) 100%);
            color:#fff;
            padding:.82rem 1rem;
            transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
            box-shadow:0 12px 24px rgba(234,88,12,.22);
        }
        .btn-main:hover{transform:translateY(-1px);filter:brightness(1.03)}
        .btn-ghost{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:.45rem;
            border-radius:var(--radius);
            border:1px solid var(--line);
            background:#fff;
            color:#334155;
            padding:.82rem 1rem;
            transition:transform .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
        }
        .btn-ghost:hover{
            transform:translateY(-1px);
            border-color:rgba(234,88,12,.35);
            color:var(--accent);
            box-shadow:0 10px 22px rgba(15,23,42,.05);
        }
        .metric{
            background:linear-gradient(180deg,#ffffff 0%,#fff8f1 100%);
            border:1px solid rgba(234,88,12,.12);
            border-radius:var(--radius);
        }
        .metric strong{color:var(--accent)}
        details summary::-webkit-details-marker{display:none}
        .faq-item[open]{
            border-color:rgba(234,88,12,.35);
            box-shadow:0 10px 24px rgba(15,23,42,.06);
        }
        .footer-link{
            border:1px solid var(--line);
            background:#fff;
            border-radius:var(--radius);
            transition:all .2s ease;
        }
        .footer-link:hover{
            border-color:rgba(234,88,12,.35);
            color:var(--accent);
            box-shadow:0 8px 18px rgba(15,23,42,.05);
        }
        .mobile-menu{
            position:relative;
            z-index:40;
        }
        @media (max-width: 767px){
            .sticky-safe{top:4.5rem}
        }

/* roulang page: category2 */
:root{
  --bg:#faf7f2;
  --surface:#ffffff;
  --surface-soft:#fff7ef;
  --line:#e7ddd1;
  --text:#1f2937;
  --muted:#6b7280;
  --accent:#ea580c;
  --accent-strong:#dc2626;
  --gold:#d97706;
  --shadow:0 18px 45px rgba(15,23,42,.08);
}
*,:before,:after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit}
::selection{background:rgba(234,88,12,.18);color:#111827}
.container-shell{width:min(1120px,calc(100% - 1rem));margin-inline:auto}
.panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:var(--shadow);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background-color .18s ease;
}
.panel:hover{border-color:rgba(234,88,12,.32)}
.badge{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  padding:.35rem .75rem;
  font-size:.75rem;
  font-weight:600;
  color:var(--muted);
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  border-radius:999px;
  border:1px solid rgba(234,88,12,.18);
  background:#fff7f2;
  padding:.35rem .7rem;
  font-size:.75rem;
  font-weight:600;
  color:#9a3412;
}
.section-title{
  font-size:clamp(1.2rem,2vw,1.75rem);
  font-weight:800;
  line-height:1.2;
  color:var(--text);
}
.section-sub{
  margin-top:.5rem;
  max-width:48rem;
  font-size:.95rem;
  color:var(--muted);
}
.stat-number{
  font-size:clamp(1.7rem,3vw,2.6rem);
  font-weight:900;
  line-height:1;
  color:var(--accent-strong);
}
.entry-item{
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  padding:1rem;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.entry-item:hover{
  transform:translateY(-2px);
  border-color:rgba(234,88,12,.35);
  box-shadow:0 12px 24px rgba(15,23,42,.06);
}
.faq-item{
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
}
.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;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary i{transition:transform .18s ease}
.faq-item[open] summary i{transform:rotate(180deg)}
.faq-item .answer{
  padding:0 1.1rem 1rem;
  color:var(--muted);
  font-size:.95rem;
}
.tab-active{color:var(--accent)}
.tabbar{padding-bottom:env(safe-area-inset-bottom)}
.hero-panel{
  background:linear-gradient(180deg,#fff8f2 0%,#fff 100%);
}
.field{
  width:100%;
  border-radius:8px;
  border:1px solid var(--line);
  background:#fff;
  padding:.9rem 1rem;
  font-size:.95rem;
  color:var(--text);
  outline:none;
  transition:border-color .18s ease,box-shadow .18s ease;
  background-clip:padding-box;
}
.field:focus{
  border-color:rgba(234,88,12,.65);
  box-shadow:0 0 0 4px rgba(234,88,12,.12);
}