/* roulang page: index */
:root{
      --bg:#f6f7fb;
      --panel:#ffffff;
      --panel-2:#f1f5f9;
      --text:#0f172a;
      --muted:#64748b;
      --line:#dbe3ee;
      --accent:#0f172a;
      --accent-2:#f59e0b;
      --accent-3:#06b6d4;
      --good:#16a34a;
      --shadow:0 16px 40px rgba(15,23,42,.08);
      --radius:8px;
      --radius-lg:12px;
      --container:1180px;
    }
    html{scroll-behavior:smooth;}
    body{
      margin:0;
      color:var(--text);
      background:
        radial-gradient(circle at top left, rgba(245,158,11,.08), transparent 22%),
        radial-gradient(circle at top right, rgba(6,182,212,.08), transparent 18%),
        linear-gradient(180deg,#f8fafc 0%, #f3f6fb 100%);
      font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
      line-height:1.7;
      text-rendering:optimizeLegibility;
      -webkit-font-smoothing:antialiased;
    }
    *{box-sizing:border-box;}
    ::selection{background:rgba(245,158,11,.22);}
    a{color:inherit;text-decoration:none;}
    img{max-width:100%;display:block;}
    button,input,textarea{
      font:inherit;
    }
    .container{
      width:min(var(--container), calc(100% - 1.5rem));
      margin-inline:auto;
    }
    .panel{
      background:rgba(255,255,255,.82);
      backdrop-filter: blur(10px);
      border:1px solid rgba(219,227,238,.9);
      box-shadow:var(--shadow);
    }
    .panel-solid{
      background:var(--panel);
      border:1px solid var(--line);
      box-shadow:var(--shadow);
    }
    .chip{
      border:1px solid var(--line);
      background:#fff;
      color:var(--muted);
      transition:all .18s ease;
    }
    .chip:hover{
      transform:translateY(-1px);
      border-color:#b7c3d4;
      color:var(--text);
      box-shadow:0 10px 20px rgba(15,23,42,.06);
    }
    .chip-active{
      background:var(--accent);
      border-color:var(--accent);
      color:#fff;
    }
    .chip-disabled{
      background:#eef2f7;
      color:#94a3b8;
      border-color:#e2e8f0;
      cursor:not-allowed;
    }
    .hero-cover{
      position:relative;
      overflow:hidden;
      border-radius:var(--radius-lg);
      border:1px solid rgba(219,227,238,.9);
      background:
        linear-gradient(180deg, rgba(255,255,255,.97), rgba(248,250,252,.98)),
        repeating-linear-gradient(90deg, rgba(15,23,42,.03) 0, rgba(15,23,42,.03) 1px, transparent 1px, transparent 22px);
      box-shadow:var(--shadow);
    }
    .hero-cover:before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 18% 18%, rgba(245,158,11,.16), transparent 18%),
        radial-gradient(circle at 85% 15%, rgba(6,182,212,.12), transparent 16%);
      pointer-events:none;
    }
    .section-title{
      letter-spacing:-.02em;
    }
    .stat{
      border:1px solid var(--line);
      background:#fff;
      border-radius:10px;
    }
    .hover-lift{
      transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .hover-lift:hover{
      transform:translateY(-2px);
      box-shadow:0 16px 32px rgba(15,23,42,.08);
      border-color:#cbd5e1;
    }
    .link-line{
      position:relative;
    }
    .link-line:after{
      content:"";
      position:absolute;
      left:0;right:0;bottom:-2px;
      height:1px;
      background:currentColor;
      transform:scaleX(0);
      transform-origin:left;
      transition:transform .18s ease;
      opacity:.7;
    }
    .link-line:hover:after{transform:scaleX(1);}
    details.faq{
      border:1px solid var(--line);
      background:#fff;
      border-radius:12px;
      overflow:hidden;
    }
    details.faq[open]{
      box-shadow:var(--shadow);
      border-color:#cbd5e1;
    }
    details.faq summary{
      list-style:none;
      cursor:pointer;
    }
    details.faq summary::-webkit-details-marker{display:none;}
    .grid-dot{
      background-image:
        radial-gradient(rgba(15,23,42,.08) 1px, transparent 1px);
      background-size: 18px 18px;
    }
    .soft-line{
      border-top:1px solid var(--line);
    }
    .fade-in{
      animation:fadeInUp .7s ease both;
    }
    .delay-1{animation-delay:.08s;}
    .delay-2{animation-delay:.16s;}
    .delay-3{animation-delay:.24s;}
    @keyframes fadeInUp{
      from{opacity:0;transform:translateY(10px);}
      to{opacity:1;transform:translateY(0);}
    }
    @media (max-width: 768px){
      .container{width:min(var(--container), calc(100% - 1rem));}
    }

/* roulang page: category1 */
:root{
      --bg:#f8fafc;
      --panel:#ffffff;
      --ink:#0f172a;
      --muted:#64748b;
      --soft:#e2e8f0;
      --line:#cbd5e1;
      --accent:#f59e0b;
      --accent-2:#06b6d4;
      --success:#10b981;
      --danger:#ef4444;
      --radius:8px;
      --radius-lg:12px;
      --shadow:0 18px 50px rgba(15,23,42,.08);
      --shadow-sm:0 8px 22px rgba(15,23,42,.06);
      --transition:180ms ease;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      min-height:100vh;
      color:var(--ink);
      background:
        linear-gradient(180deg,rgba(248,250,252,.94),rgba(255,255,255,.98)),
        radial-gradient(circle at 20% 0%,rgba(245,158,11,.08),transparent 28%),
        radial-gradient(circle at 90% 12%,rgba(6,182,212,.08),transparent 26%);
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
      line-height:1.6;
      text-rendering:optimizeLegibility;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,select{font:inherit}
    button{cursor:pointer}
    ::selection{background:#0f172a;color:#fff}
    .container{
      width:min(1160px,calc(100% - 32px));
      margin-inline:auto;
    }
    .chip{
      color:#475569;
      background:transparent;
      transition:transform var(--transition),background var(--transition),color var(--transition),box-shadow var(--transition);
    }
    .chip:hover{
      transform:translateY(-1px);
      background:#fff;
      color:#0f172a;
      box-shadow:var(--shadow-sm);
    }
    .chip-active{
      background:#0f172a!important;
      color:#fff!important;
      box-shadow:0 8px 18px rgba(15,23,42,.15);
    }
    .chip-disabled{
      color:#94a3b8;
      background:#f1f5f9;
      border:1px dashed #cbd5e1;
    }
    .link-line{
      position:relative;
      transition:color var(--transition);
    }
    .link-line::after{
      content:"";
      position:absolute;
      left:0;
      right:100%;
      bottom:-2px;
      height:1px;
      background:#0f172a;
      transition:right var(--transition);
    }
    .link-line:hover{color:#0f172a}
    .link-line:hover::after{right:0}
    .soft-line{border-top:1px solid var(--soft)}
    .hero-band{
      position:relative;
      overflow:hidden;
      background:#0f172a;
      color:#fff;
    }
    .hero-band::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px),
        linear-gradient(180deg,rgba(255,255,255,.06) 1px,transparent 1px);
      background-size:42px 42px;
      opacity:.38;
      pointer-events:none;
    }
    .hero-band::after{
      content:"";
      position:absolute;
      right:-80px;
      top:-120px;
      width:360px;
      height:360px;
      border:1px solid rgba(255,255,255,.14);
      transform:rotate(16deg);
      pointer-events:none;
    }
    .section{padding:64px 0}
    .section-tight{padding:42px 0}
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      border:1px solid rgba(15,23,42,.1);
      background:#fff;
      border-radius:999px;
      padding:.35rem .75rem;
      font-size:.8rem;
      color:#475569;
      box-shadow:var(--shadow-sm);
    }
    .dark-eyebrow{
      border-color:rgba(255,255,255,.18);
      background:rgba(255,255,255,.08);
      color:#e2e8f0;
      box-shadow:none;
    }
    .dot{
      width:.5rem;
      height:.5rem;
      border-radius:999px;
      background:var(--accent);
      box-shadow:0 0 0 4px rgba(245,158,11,.14);
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.5rem;
      border-radius:999px;
      padding:.72rem 1rem;
      font-weight:650;
      font-size:.92rem;
      transition:transform var(--transition),box-shadow var(--transition),background var(--transition),border-color var(--transition),color var(--transition);
      white-space:nowrap;
    }
    .btn:focus-visible,
    .filter-btn:focus-visible,
    .faq-trigger:focus-visible,
    input:focus-visible{
      outline:3px solid rgba(6,182,212,.22);
      outline-offset:2px;
    }
    .btn:hover{transform:translateY(-2px)}
    .btn-primary{background:#fff;color:#0f172a;box-shadow:0 14px 34px rgba(255,255,255,.14)}
    .btn-primary:hover{background:#f8fafc;box-shadow:0 18px 42px rgba(255,255,255,.18)}
    .btn-dark{background:#0f172a;color:#fff}
    .btn-dark:hover{background:#1e293b;box-shadow:var(--shadow-sm)}
    .btn-outline{border:1px solid rgba(255,255,255,.24);color:#fff;background:rgba(255,255,255,.04)}
    .btn-outline:hover{border-color:rgba(255,255,255,.46);background:rgba(255,255,255,.1)}
    .card{
      border:1px solid var(--soft);
      background:rgba(255,255,255,.92);
      border-radius:var(--radius);
      box-shadow:var(--shadow-sm);
      transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
    }
    .card:hover{
      transform:translateY(-3px);
      border-color:#cbd5e1;
      box-shadow:var(--shadow);
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      border-radius:999px;
      border:1px solid var(--soft);
      background:#f8fafc;
      color:#475569;
      padding:.24rem .58rem;
      font-size:.76rem;
      line-height:1.2;
      white-space:nowrap;
    }
    .badge-hot{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.1);color:#92400e}
    .badge-new{border-color:rgba(6,182,212,.3);background:rgba(6,182,212,.1);color:#155e75}
    .badge-safe{border-color:rgba(16,185,129,.3);background:rgba(16,185,129,.1);color:#047857}
    .filter-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border:1px solid var(--soft);
      background:#fff;
      color:#475569;
      border-radius:999px;
      padding:.56rem .86rem;
      font-size:.86rem;
      font-weight:650;
      transition:all var(--transition);
    }
    .filter-btn:hover{border-color:#94a3b8;color:#0f172a;transform:translateY(-1px)}
    .filter-btn.active{background:#0f172a;color:#fff;border-color:#0f172a}
    .entry-card{display:flex;flex-direction:column;min-height:220px}
    .entry-card[hidden]{display:none!important}
    .score-bar{
      height:8px;
      border-radius:999px;
      background:#e2e8f0;
      overflow:hidden;
    }
    .score-bar span{
      display:block;
      height:100%;
      border-radius:999px;
      background:linear-gradient(90deg,#0f172a,#06b6d4);
    }
    .status-tile{
      border:1px solid rgba(255,255,255,.16);
      background:rgba(255,255,255,.07);
      border-radius:var(--radius);
      padding:1rem;
      backdrop-filter:blur(10px);
    }
    .search-input{
      width:100%;
      border:1px solid var(--soft);
      background:#fff;
      border-radius:999px;
      padding:.82rem 1rem;
      color:#0f172a;
      box-shadow:var(--shadow-sm);
      transition:border-color var(--transition),box-shadow var(--transition);
    }
    .search-input:focus{
      border-color:#94a3b8;
      box-shadow:0 0 0 4px rgba(15,23,42,.05);
    }
    .faq-item{
      border:1px solid var(--soft);
      border-radius:var(--radius);
      background:#fff;
      overflow:hidden;
    }
    .faq-trigger{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding:1rem 1.1rem;
      text-align:left;
      font-weight:700;
      color:#0f172a;
      transition:background var(--transition);
    }
    .faq-trigger:hover{background:#f8fafc}
    .faq-panel{
      display:none;
      padding:0 1.1rem 1.1rem;
      color:#64748b;
      font-size:.94rem;
      line-height:1.85;
    }
    .faq-item.open .faq-panel{display:block}
    .faq-item.open .faq-icon{transform:rotate(45deg)}
    .faq-icon{transition:transform var(--transition)}
    .cta-panel{
      background:#0f172a;
      color:#fff;
      border-radius:var(--radius-lg);
      overflow:hidden;
      position:relative;
      box-shadow:var(--shadow);
    }
    .cta-panel::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(135deg,rgba(245,158,11,.18),transparent 38%,rgba(6,182,212,.16));
      pointer-events:none;
    }
    .fade-up{
      animation:fadeUp .62s ease both;
    }
    @keyframes fadeUp{
      from{opacity:0;transform:translateY(14px)}
      to{opacity:1;transform:translateY(0)}
    }
    @media (max-width:1024px){
      .section{padding:52px 0}
      .container{width:min(100% - 28px,960px)}
    }
    @media (max-width:768px){
      .section{padding:42px 0}
      .section-tight{padding:32px 0}
      .hero-band::after{width:220px;height:220px;right:-120px}
      .btn{width:100%}
      .entry-card{min-height:auto}
    }
    @media (max-width:520px){
      .container{width:min(100% - 22px,480px)}
      .search-input{border-radius:14px}
      .filter-btn{padding:.5rem .72rem;font-size:.82rem}
      .badge{font-size:.72rem}
    }