/* roulang page: index */
:root {
      --bg: #f5f6f7;
      --panel: rgba(255, 255, 255, 0.92);
      --panel-strong: #ffffff;
      --text: #101214;
      --muted: #667085;
      --line: #d5d9df;
      --rose: #e11d48;
      --cyan: #06b6d4;
      --gold: #d4a017;
      --shadow: 0 18px 44px rgba(16, 18, 20, 0.08);
      --shadow-hover: 0 22px 46px rgba(16, 18, 20, 0.12);
      --radius: 8px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      color: var(--text);
      background:
        linear-gradient(rgba(16, 18, 20, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 18, 20, 0.035) 1px, transparent 1px),
        linear-gradient(180deg, #fafbfc 0%, #eef1f4 100%);
      background-size: 48px 48px, 48px 48px, 100% 100%;
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
      letter-spacing: 0;
      line-height: 1.6;
      overflow-x: hidden;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    img {
      max-width: 100%;
      display: block;
    }

    button,
    input,
    select,
    textarea {
      font: inherit;
    }

    .site-shell {
      position: relative;
      isolation: isolate;
    }

    .site-shell::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background:
        radial-gradient(circle at 12% 16%, rgba(6, 182, 212, 0.06), transparent 22%),
        radial-gradient(circle at 82% 14%, rgba(225, 29, 72, 0.07), transparent 18%),
        radial-gradient(circle at 78% 76%, rgba(212, 160, 23, 0.06), transparent 16%);
    }

    .panel {
      background: var(--panel);
      border: 1px solid rgba(213, 217, 223, 0.92);
      box-shadow: var(--shadow);
      border-radius: var(--radius);
      backdrop-filter: blur(12px);
    }

    .panel-strong {
      background: var(--panel-strong);
      border: 1px solid rgba(213, 217, 223, 1);
      box-shadow: var(--shadow);
      border-radius: var(--radius);
    }

    .hairline {
      border-color: var(--line);
    }

    .section-title {
      color: var(--text);
      letter-spacing: 0;
    }

    .section-note {
      color: var(--muted);
    }

    .metric-num {
      font-size: clamp(2rem, 3vw, 2.8rem);
      line-height: 1;
      font-weight: 800;
      letter-spacing: 0;
      color: var(--text);
    }

    .metric-label {
      color: var(--muted);
      font-size: 0.9rem;
    }

    .micro-label {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.35rem 0.65rem;
      border: 1px solid rgba(213, 217, 223, 0.9);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.82);
      color: var(--muted);
      font-size: 0.82rem;
      line-height: 1;
      white-space: nowrap;
    }

    .ghost-link {
      transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
    }

    .ghost-link:hover {
      transform: translateY(-1px);
      border-color: rgba(225, 29, 72, 0.28);
      box-shadow: 0 12px 22px rgba(16, 18, 20, 0.08);
    }

    .nav-chip {
      transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
    }

    .nav-chip:hover {
      transform: translateY(-1px);
      border-color: rgba(225, 29, 72, 0.22);
      background: rgba(255, 255, 255, 0.96);
    }

    .nav-chip.active {
      color: #fff;
      background: var(--ink);
      border-color: var(--ink);
    }

    .card {
      border: 1px solid rgba(213, 217, 223, 0.9);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, 0.92);
      transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    }

    .card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-hover);
      border-color: rgba(225, 29, 72, 0.18);
    }

    .detail-panel {
      border: 1px solid rgba(213, 217, 223, 0.92);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, 0.95);
      overflow: hidden;
      transition: border-color 180ms ease, box-shadow 180ms ease;
    }

    .detail-panel[open] {
      border-color: rgba(225, 29, 72, 0.18);
      box-shadow: var(--shadow);
    }

    .detail-panel summary {
      list-style: none;
      cursor: pointer;
    }

    .detail-panel summary::-webkit-details-marker {
      display: none;
    }

    .detail-panel summary .chev {
      transition: transform 180ms ease;
    }

    .detail-panel[open] summary .chev {
      transform: rotate(180deg);
    }

    .input-field {
      width: 100%;
      border: 1px solid rgba(213, 217, 223, 0.95);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, 0.96);
      padding: 0.85rem 0.95rem;
      color: var(--text);
      outline: none;
      transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
    }

    .input-field::placeholder {
      color: #98a2b3;
    }

    .input-field:focus {
      border-color: rgba(6, 182, 212, 0.6);
      box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.12);
      background: #fff;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      border-radius: 7px;
      border: 1px solid transparent;
      padding: 0.9rem 1.05rem;
      font-weight: 700;
      line-height: 1;
      transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, color 180ms ease, border-color 180ms ease;
      will-change: transform;
    }

    .btn:hover {
      transform: translateY(-1px);
    }

    .btn-primary {
      background: var(--ink);
      color: #fff;
      box-shadow: 0 14px 28px rgba(16, 18, 20, 0.14);
    }

    .btn-primary:hover {
      background: #1a1d21;
      box-shadow: 0 18px 36px rgba(16, 18, 20, 0.18);
    }

    .btn-secondary {
      background: rgba(255, 255, 255, 0.92);
      color: var(--ink);
      border-color: rgba(213, 217, 223, 0.95);
    }

    .btn-secondary:hover {
      border-color: rgba(225, 29, 72, 0.26);
      background: #fff;
    }

    .btn-quiet {
      color: var(--text);
      background: rgba(255, 255, 255, 0.72);
      border-color: rgba(213, 217, 223, 0.92);
    }

    .btn-quiet:hover {
      background: rgba(255, 255, 255, 0.96);
    }

    .no-scrollbar::-webkit-scrollbar {
      display: none;
    }

    .no-scrollbar {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    .news-link {
      display: block;
      border-radius: var(--radius);
      border: 1px solid rgba(213, 217, 223, 0.88);
      background: rgba(255, 255, 255, 0.94);
      transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
    }

    .news-link:hover {
      transform: translateY(-1px);
      border-color: rgba(6, 182, 212, 0.26);
      box-shadow: 0 14px 28px rgba(16, 18, 20, 0.08);
    }

    .tag {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      border-radius: 999px;
      border: 1px solid rgba(213, 217, 223, 0.9);
      background: rgba(255, 255, 255, 0.86);
      padding: 0.35rem 0.7rem;
      font-size: 0.82rem;
      color: var(--muted);
    }

    .step-line {
      position: relative;
    }

    .step-line::before {
      content: "";
      position: absolute;
      left: 0.72rem;
      top: 0.5rem;
      bottom: 0.5rem;
      width: 1px;
      background: rgba(213, 217, 223, 0.95);
    }

    .step-dot {
      position: relative;
      z-index: 1;
    }

    @media (max-width: 768px) {
      .btn {
        width: 100%;
      }
    }

/* roulang page: category1 */
:root{
      --bg:#f3f4f6;
      --panel:#ffffff;
      --panel-soft:#f8fafc;
      --ink:#0f172a;
      --muted:#64748b;
      --line:#d8e0ea;
      --accent:#e11d48;
      --accent-2:#06b6d4;
      --accent-3:#f59e0b;
      --success:#16a34a;
      --shadow:0 18px 50px rgba(15, 23, 42, .08);
      --shadow-soft:0 10px 24px rgba(15, 23, 42, .06);
      --radius:8px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body{
      margin:0;
      color:var(--ink);
      background:
        linear-gradient(180deg, #f8fafc 0%, #f3f4f6 36%, #edf1f6 100%);
      letter-spacing:0;
      font-feature-settings:"cv02","cv03","cv04","cv11";
      text-rendering:optimizeLegibility;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:
        linear-gradient(rgba(15,23,42,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,23,42,.03) 1px, transparent 1px);
      background-size: 32px 32px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,0) 42%);
      opacity:.38;
      z-index:-1;
    }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    button, input, textarea, select { font: inherit; }
    ::selection { background: rgba(225, 29, 72, .16); }
    .no-scrollbar::-webkit-scrollbar { display:none; }
    .no-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }
    .panel{
      background: rgba(255,255,255,.86);
      border:1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow-soft);
      backdrop-filter: blur(10px);
    }
    .panel-dark{
      background:
        linear-gradient(180deg, rgba(15,23,42,1) 0%, rgba(17,24,39,1) 100%);
      border:1px solid rgba(255,255,255,.08);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      color:#fff;
    }
    .nav-chip{
      transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
      background:#fff;
      color:#334155;
    }
    .nav-chip:hover{
      transform: translateY(-1px);
      border-color:#cbd5e1;
      box-shadow: 0 8px 18px rgba(15,23,42,.06);
    }
    .nav-chip.active{
      background: #0f172a;
      color:#fff;
      border-color:#0f172a;
      box-shadow: 0 10px 20px rgba(15,23,42,.18);
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.5rem;
      min-height:44px;
      padding:.7rem 1rem;
      border-radius:6px;
      border:1px solid transparent;
      font-weight:700;
      transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
      white-space:nowrap;
    }
    .btn:hover{ transform: translateY(-1px); }
    .btn:focus-visible,
    .nav-chip:focus-visible,
    .filter-chip:focus-visible,
    input:focus-visible,
    textarea:focus-visible,
    summary:focus-visible{
      outline: 2px solid rgba(225,29,72,.35);
      outline-offset: 2px;
    }
    .btn-primary{
      background:#0f172a;
      color:#fff;
      box-shadow: 0 10px 24px rgba(15,23,42,.16);
    }
    .btn-primary:hover{ background:#111827; }
    .btn-soft{
      background: rgba(255,255,255,.9);
      color:#0f172a;
      border-color: var(--line);
    }
    .btn-soft:hover{
      background:#fff;
      border-color:#cbd5e1;
    }
    .micro-label{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      border:1px solid var(--line);
      background: rgba(248,250,252,.95);
      color:#475569;
      border-radius: 999px;
      padding:.4rem .7rem;
      font-size:.75rem;
      font-weight:700;
      line-height:1;
    }
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      color: var(--accent);
      font-size:.78rem;
      font-weight:800;
      background: rgba(225,29,72,.08);
      border:1px solid rgba(225,29,72,.15);
      border-radius:999px;
      padding:.35rem .7rem;
    }
    .section-title{
      color:#0f172a;
      line-height:1.1;
      font-weight:800;
    }
    .section-desc{
      color:#64748b;
      line-height:1.8;
    }
    .filter-chip{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.45rem;
      min-height:40px;
      padding:.55rem .85rem;
      border-radius:6px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.92);
      color:#334155;
      font-size:.875rem;
      font-weight:700;
      transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
    }
    .filter-chip:hover{
      transform: translateY(-1px);
      border-color:#cbd5e1;
      box-shadow: 0 8px 18px rgba(15,23,42,.06);
    }
    .filter-chip.active{
      background:#0f172a;
      border-color:#0f172a;
      color:#fff;
      box-shadow: 0 10px 22px rgba(15,23,42,.16);
    }
    .entry-card{
      overflow:hidden;
      border-radius: var(--radius);
      border:1px solid var(--line);
      background: rgba(255,255,255,.92);
      box-shadow: var(--shadow-soft);
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    }
    .entry-card:hover{
      transform: translateY(-2px);
      border-color: rgba(225,29,72,.28);
      box-shadow: 0 16px 34px rgba(15,23,42,.10);
    }
    .entry-card .preview{
      position:relative;
      min-height: 152px;
      overflow:hidden;
    }
    .entry-card .preview::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,0) 42%),
        linear-gradient(135deg, rgba(15,23,42,.08), rgba(15,23,42,0) 56%);
      pointer-events:none;
    }
    .entry-card .glance{
      position:absolute;
      inset:auto 14px 14px 14px;
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:.75rem;
    }
    .entry-card .bars{
      display:grid;
      gap:.4rem;
      flex:1;
    }
    .entry-card .bar{
      height:8px;
      border-radius:999px;
      background: rgba(255,255,255,.24);
      overflow:hidden;
    }
    .entry-card .bar > span{
      display:block;
      height:100%;
      border-radius:999px;
      background: rgba(255,255,255,.92);
    }
    .entry-card .card-body{
      padding:1rem;
    }
    .stat-card{
      border-radius: var(--radius);
      border:1px solid var(--line);
      background: rgba(255,255,255,.9);
      box-shadow: var(--shadow-soft);
      padding:1rem;
    }
    .stat-num{
      font-size: 2rem;
      line-height: 1;
      font-weight: 900;
      color:#0f172a;
    }
    .stat-note{
      color:#64748b;
      line-height:1.65;
      font-size:.88rem;
    }
    .feature-card{
      border-radius: var(--radius);
      border:1px solid var(--line);
      background: rgba(255,255,255,.9);
      box-shadow: var(--shadow-soft);
      padding:1rem;
    }
    .feature-card strong{
      display:block;
      margin-bottom:.45rem;
      font-size:1rem;
    }
    .feature-card p{
      color:#64748b;
      line-height:1.8;
      font-size:.92rem;
    }
    .faq-item{
      border-radius: var(--radius);
      border:1px solid var(--line);
      background: rgba(255,255,255,.9);
      box-shadow: var(--shadow-soft);
      overflow:hidden;
    }
    .faq-item summary{
      list-style:none;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding:1rem 1rem;
      font-weight:800;
      color:#0f172a;
    }
    .faq-item summary::-webkit-details-marker{ display:none; }
    .faq-item .faq-answer{
      padding:0 1rem 1rem 1rem;
      color:#64748b;
      line-height:1.85;
    }
    .form-field{
      width:100%;
      min-height:44px;
      border-radius:6px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.94);
      color:#0f172a;
      padding:.72rem .85rem;
      transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
    }
    .form-field:hover{
      border-color:#cbd5e1;
    }
    .form-field:focus{
      border-color: rgba(225,29,72,.34);
      box-shadow: 0 0 0 3px rgba(225,29,72,.10);
      background:#fff;
      outline:none;
    }
    textarea.form-field{
      min-height:120px;
      resize:vertical;
    }
    .soft-rule{
      height:1px;
      background: linear-gradient(90deg, transparent, rgba(148,163,184,.55), transparent);
    }
    .result-pill{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      border-radius:999px;
      border:1px solid var(--line);
      background:#fff;
      color:#475569;
      padding:.45rem .75rem;
      font-size:.78rem;
      font-weight:700;
    }
    @media (max-width: 1024px){
      .entry-card .preview{ min-height: 140px; }
    }
    @media (max-width: 768px){
      .btn, .nav-chip, .filter-chip { min-height: 40px; }
    }
    @media (max-width: 520px){
      .section-title{ word-break: break-word; }
      .entry-card .card-body{ padding:.9rem; }
    }