/* roulang page: index */
:root{
      --bg: #f3f8ff;
      --bg-2: #eaf2ff;
      --panel: #ffffff;
      --line: #d8e5f3;
      --line-strong: #bfd3ea;
      --text: #15324b;
      --muted: #5b6f84;
      --brand: #2b78ff;
      --brand-deep: #184eb4;
      --brand-soft: #e7f0ff;
      --shadow: 0 14px 32px rgba(18, 51, 95, 0.10);
      --shadow-hover: 0 20px 44px rgba(18, 51, 95, 0.16);
      --radius: 8px;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body{
      margin:0;
      color:var(--text);
      background:
        linear-gradient(180deg, #f8fbff 0%, #eff6ff 58%, #f8fbff 100%);
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height:1.6;
      letter-spacing:0;
    }
    a { color: inherit; text-decoration: none; }
    img { display:block; max-width:100%; }
    button, input { font: inherit; }
    ::selection { background:#cfe1ff; color:#0e2b52; }

    .container{
      width:min(1180px, calc(100% - 2rem));
      margin-inline:auto;
    }
    .section{
      padding: 4rem 0;
    }
    .section-tight{
      padding: 2rem 0 3rem;
    }
    .panel{
      background: rgba(255,255,255,.94);
      border:1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }
    .panel-hover{
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
    }
    .panel-hover:hover{
      transform: translateY(-2px);
      box-shadow: var(--shadow-hover);
      border-color: var(--line-strong);
    }
    .soft-border{
      border:1px solid var(--line);
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:.38rem .7rem;
      border-radius:999px;
      background: var(--brand-soft);
      color: var(--brand-deep);
      font-size:.82rem;
      font-weight:700;
      letter-spacing:0;
    }
    .eyebrow-dot{
      width:.55rem;
      height:.55rem;
      border-radius:999px;
      background: var(--brand);
      box-shadow: 0 0 0 4px rgba(43,120,255,.12);
    }
    .section-title{
      font-size: clamp(1.45rem, 1.1rem + 1vw, 2rem);
      line-height:1.18;
      font-weight:800;
      letter-spacing:0;
      color: var(--text);
    }
    .section-desc{
      color: var(--muted);
      max-width: 64ch;
    }
    .nav-link{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.55rem .9rem;
      border-radius: 999px;
      color:#33506e;
      border:1px solid transparent;
      transition: all .2s ease;
      font-weight:600;
      white-space:nowrap;
    }
    .nav-link:hover{
      background:#f2f7ff;
      border-color:#dbe7f5;
      color:#16416d;
    }
    .nav-link.active{
      background: var(--brand-soft);
      color: var(--brand-deep);
      border-color: #c9dcfb;
    }
    .search-shell{
      display:flex;
      align-items:center;
      gap:.65rem;
      padding:.55rem .8rem;
      min-width: 0;
      background:#ffffff;
      border:1px solid var(--line);
      border-radius: 999px;
      box-shadow: 0 8px 18px rgba(18, 51, 95, 0.05);
    }
    .search-shell svg{
      flex:none;
      color:#7b8ea4;
    }
    .search-shell input{
      width: 16rem;
      min-width: 0;
      border:0;
      outline:none;
      background:transparent;
      color: var(--text);
    }
    .search-shell input::placeholder{
      color:#7b8ea4;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      border-radius: 999px;
      padding:.8rem 1.15rem;
      font-weight:700;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
      border:1px solid transparent;
      white-space:nowrap;
    }
    .btn:hover{ transform: translateY(-1px); }
    .btn-primary{
      background: linear-gradient(180deg, #3f89ff 0%, #2b78ff 100%);
      color:#fff;
      box-shadow: 0 14px 28px rgba(43,120,255,.22);
    }
    .btn-primary:hover{
      box-shadow: 0 18px 34px rgba(43,120,255,.28);
    }
    .btn-secondary{
      background:#fff;
      color:var(--brand-deep);
      border-color:#cfe0f7;
    }
    .btn-secondary:hover{
      background:#f5f9ff;
      border-color:#b8cff0;
    }
    .btn-ghost{
      background: transparent;
      color: var(--brand-deep);
      border-color: transparent;
    }
    .btn-ghost:hover{
      background:#f3f8ff;
      border-color:#dce8f7;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.42rem .68rem;
      border-radius:999px;
      border:1px solid #d8e5f3;
      background:#f8fbff;
      color:#47607b;
      font-size:.82rem;
      font-weight:600;
      white-space:nowrap;
    }
    .tag strong{
      color:#173d68;
      font-weight:800;
    }
    .mini-stat{
      padding:1rem;
      border-radius:var(--radius);
      background:#f8fbff;
      border:1px solid #dce7f4;
    }
    .mini-stat strong{
      display:block;
      font-size:1.2rem;
      color:var(--brand-deep);
      line-height:1.15;
    }
    .mini-stat span{
      color:var(--muted);
      font-size:.9rem;
    }
    .cover-art{
      position:relative;
      overflow:hidden;
      border-radius:var(--radius);
      min-height: 17rem;
      background:
        linear-gradient(180deg, rgba(18,51,95,.05), rgba(18,51,95,.24)),
        url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1200&q=80') center/cover no-repeat;
      border:1px solid rgba(255,255,255,.65);
      box-shadow: var(--shadow);
    }
    .cover-art::after{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(8,19,35,.12) 100%);
    }
    .cover-overlay{
      position:absolute;
      inset:auto 1rem 1rem 1rem;
      z-index:1;
      display:flex;
      flex-direction:column;
      gap:.55rem;
    }
    .cover-chip{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      width:fit-content;
      padding:.35rem .65rem;
      border-radius:999px;
      background: rgba(255,255,255,.9);
      color:#18416e;
      font-size:.8rem;
      font-weight:700;
      border:1px solid rgba(210,224,239,.8);
    }
    .directory-card{
      background:#fff;
      border:1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .directory-card .head{
      padding:1rem 1rem .2rem;
    }
    .directory-card .body{
      padding:0 1rem 1rem;
    }
    .scroll-row{
      display:flex;
      gap:1rem;
      overflow-x:auto;
      padding-bottom:.3rem;
      scroll-snap-type: x proximity;
    }
    .scroll-row > article{
      scroll-snap-align: start;
      flex: 0 0 18rem;
    }
    .soft-rail{
      position:relative;
    }
    .soft-rail::before{
      content:"";
      position:absolute;
      inset:0;
      border-top:1px solid rgba(216,229,243,.9);
      pointer-events:none;
    }
    .cover-slot{
      min-height: 9.75rem;
      border-radius: var(--radius);
      overflow:hidden;
      border:1px solid #dce7f4;
      background:
        linear-gradient(145deg, rgba(43,120,255,.10), rgba(43,120,255,.02)),
        #f7fbff;
      position:relative;
    }
    .cover-slot .badge{
      position:absolute;
      top:.8rem;
      left:.8rem;
    }
    .cover-slot .anchor{
      position:absolute;
      inset:auto .8rem .8rem .8rem;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:.75rem;
      color:#12335f;
      font-weight:800;
    }
    .card-title{
      font-size:1.08rem;
      line-height:1.35;
      font-weight:800;
      color:#173d68;
    }
    .muted{
      color:var(--muted);
    }
    .list-link{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:1rem;
      padding:1rem 0;
      border-bottom:1px solid #e6eef7;
      transition: color .18s ease;
    }
    .list-link:hover .title{
      color:var(--brand);
    }
    .list-link:last-child{
      border-bottom:0;
      padding-bottom:0;
    }
    .list-link .title{
      font-weight:700;
      color:#173d68;
      transition: color .18s ease;
    }
    .list-link .date{
      color:#88a0b8;
      white-space:nowrap;
      font-size:.9rem;
    }
    .pill-progress{
      height: 10px;
      background:#edf4fb;
      border-radius:999px;
      overflow:hidden;
      border:1px solid #dbe8f5;
    }
    .pill-progress span{
      display:block;
      height:100%;
      width:76%;
      border-radius:inherit;
      background: linear-gradient(90deg, #6aa8ff 0%, #2b78ff 100%);
    }
    .review{
      padding:1rem;
      height:100%;
      background:#fff;
      border:1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }
    .review p{
      color:#30506c;
    }
    .avatar{
      width:2.4rem;
      height:2.4rem;
      border-radius:999px;
      display:grid;
      place-items:center;
      background:#e7f0ff;
      color:var(--brand-deep);
      font-weight:800;
      flex:none;
    }
    details{
      background:#fff;
      border:1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    details + details{
      margin-top:.8rem;
    }
    summary{
      list-style:none;
      cursor:pointer;
      padding:1rem 1.1rem;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      font-weight:800;
      color:#173d68;
    }
    summary::-webkit-details-marker{ display:none; }
    summary .chev{
      width:1.2rem;
      height:1.2rem;
      transition: transform .2s ease;
      flex:none;
      color:#6b83a0;
    }
    details[open] summary .chev{
      transform: rotate(180deg);
    }
    details .answer{
      padding:0 1.1rem 1rem;
      color:#4e667f;
    }
    .footer-link{
      color:#58708a;
      transition: color .18s ease;
    }
    .footer-link:hover{
      color: var(--brand-deep);
    }
    .mobile-panel{
      display:none;
    }
    .toast{
      position:fixed;
      left:50%;
      bottom:1.4rem;
      transform:translateX(-50%) translateY(14px);
      opacity:0;
      pointer-events:none;
      background:rgba(14,31,56,.94);
      color:#fff;
      padding:.7rem 1rem;
      border-radius:999px;
      box-shadow: 0 16px 30px rgba(8,18,36,.25);
      transition:opacity .2s ease, transform .2s ease;
      z-index:60;
    }
    .toast.show{
      opacity:1;
      transform:translateX(-50%) translateY(0);
    }

    @media (max-width: 1024px){
      .scroll-row > article{
        flex-basis: 16.5rem;
      }
    }
    @media (max-width: 768px){
      .section{ padding: 3rem 0; }
      .container{ width:min(1180px, calc(100% - 1.2rem)); }
      .mobile-panel{ display:block; }
      .desktop-only{ display:none !important; }
      .search-shell input{ width: 8.5rem; }
    }
    @media (max-width: 520px){
      .search-shell{
        width:100%;
      }
      .search-shell input{
        width:100%;
      }
      .btn{
        width:100%;
      }
      .scroll-row > article{
        flex-basis: 15.5rem;
      }
    }

/* roulang page: category1 */
:root{
      --bg:#f6f9fe;
      --surface:#ffffff;
      --surface-2:#f3f7fd;
      --line:#dbe5f1;
      --line-strong:#c8d7eb;
      --text:#112033;
      --muted:#64748b;
      --brand:#2563eb;
      --brand-strong:#1d4ed8;
      --brand-soft:#eaf2ff;
      --success:#0f766e;
      --shadow:0 10px 28px rgba(15,23,42,.08);
      --shadow-strong:0 16px 34px rgba(37,99,235,.12);
      --radius:8px;
      --radius-sm:6px;
      --space:24px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      background:
        linear-gradient(180deg,#f8fbff 0%,#ffffff 36%,#f7f9fd 100%);
      font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
      line-height:1.6;
      letter-spacing:0;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,select{font:inherit}
    ::selection{background:#dbeafe;color:#0f172a}
    .container{
      width:100%;
      max-width:1200px;
      margin:0 auto;
      padding-left:16px;
      padding-right:16px;
    }
    @media (min-width:640px){
      .container{padding-left:24px;padding-right:24px}
    }
    .nav-link,.footer-link,.chip,.btn,.search-shell input,.search-shell button,.select-shell{
      transition:background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease, opacity .18s ease;
    }
    .nav-link{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.7rem .95rem;
      border:1px solid transparent;
      border-radius:var(--radius);
      color:#334155;
      background:transparent;
      font-weight:600;
    }
    .nav-link:hover{
      background:#f5f9ff;
      border-color:#d8e5f3;
      color:#173055;
    }
    .nav-link.active{
      background:var(--brand-soft);
      border-color:#cfe0fb;
      color:#1847a8;
      box-shadow:inset 0 0 0 1px rgba(37,99,235,.04);
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.5rem;
      border-radius:var(--radius);
      padding:.8rem 1rem;
      border:1px solid transparent;
      font-weight:700;
      line-height:1;
      cursor:pointer;
      white-space:nowrap;
    }
    .btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
    .btn:active{transform:translateY(0)}
    .btn-primary{
      background:linear-gradient(180deg,#3b82f6 0%,#2563eb 100%);
      color:#fff;
      box-shadow:0 12px 24px rgba(37,99,235,.16);
    }
    .btn-primary:hover{background:linear-gradient(180deg,#4b8ff7 0%,#1d4ed8 100%)}
    .btn-secondary{
      background:#fff;
      border-color:#d7e2ef;
      color:#173055;
      box-shadow:0 6px 16px rgba(15,23,42,.05);
    }
    .btn-ghost{
      background:#f7fbff;
      border-color:#dce7f3;
      color:#173055;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.34rem .65rem;
      border-radius:999px;
      font-size:.78rem;
      font-weight:700;
      color:#1847a8;
      background:#eef5ff;
      border:1px solid #d4e3fb;
    }
    .badge-soft{
      color:#0f766e;
      background:#ecfdf9;
      border-color:#c9f2e7;
    }
    .section-shell{
      padding:34px 0;
    }
    @media (min-width:768px){
      .section-shell{padding:48px 0}
    }
    .panel-card,.content-card,.stat-card,.hero-slab,.mini-card,.faq-item,.cta-shell,.toolbar{
      background:rgba(255,255,255,.88);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
    }
    .panel-card:hover,.content-card:hover,.mini-card:hover{
      box-shadow:var(--shadow-strong);
      border-color:#c7d9ef;
    }
    .hero-grid{
      display:grid;
      gap:24px;
      align-items:stretch;
    }
    @media (min-width:1024px){
      .hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr)}
    }
    .hero-card{
      position:relative;
      overflow:hidden;
      border-radius:var(--radius);
      border:1px solid #d7e4f3;
      background:
        linear-gradient(180deg,rgba(238,245,255,.92) 0%,rgba(255,255,255,.98) 100%);
      box-shadow:var(--shadow);
    }
    .hero-card::before{
      content:"";
      position:absolute;
      inset:auto -10% -12% auto;
      width:260px;
      height:260px;
      background:linear-gradient(135deg,rgba(59,130,246,.12),rgba(37,99,235,.04));
      border-radius:28px;
      transform:rotate(14deg);
      pointer-events:none;
    }
    .hero-card::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg,rgba(255,255,255,.0) 0%,rgba(255,255,255,.0) 58%,rgba(255,255,255,.16) 100%);
      pointer-events:none;
    }
    .hero-stat{
      display:grid;
      gap:2px;
      min-width:0;
    }
    .hero-stat strong{
      font-size:1.05rem;
      line-height:1.2;
      color:#0f172a;
    }
    .hero-stat span{
      font-size:.82rem;
      color:var(--muted);
    }
    .poster{
      position:relative;
      overflow:hidden;
      border-radius:var(--radius);
      border:1px solid rgba(191,219,254,.9);
      background:
        linear-gradient(145deg,rgb(var(--accent) / 1),rgb(var(--accent2) / 1));
      min-height:120px;
      box-shadow:0 12px 24px rgba(15,23,42,.08);
    }
    .poster::before{
      content:"";
      position:absolute;
      inset:12px;
      border-radius:6px;
      border:1px solid rgba(255,255,255,.24);
    }
    .poster::after{
      content:"";
      position:absolute;
      inset:auto 18px 18px 18px;
      height:34px;
      border-radius:6px;
      background:rgba(255,255,255,.88);
      box-shadow:0 8px 18px rgba(15,23,42,.08);
    }
    .poster-label{
      position:absolute;
      top:12px;
      left:12px;
      z-index:1;
      padding:.3rem .55rem;
      border-radius:999px;
      font-size:.72rem;
      font-weight:700;
      color:#163c7a;
      background:rgba(255,255,255,.92);
      border:1px solid rgba(255,255,255,.76);
    }
    .toolbar{
      padding:14px;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.35rem;
      min-height:38px;
      padding:.52rem .9rem;
      border:1px solid #d8e5f3;
      background:#fff;
      color:#35506f;
      border-radius:999px;
      font-size:.9rem;
      font-weight:700;
      cursor:pointer;
    }
    .chip:hover{
      transform:translateY(-1px);
      border-color:#bcd0eb;
      box-shadow:0 8px 16px rgba(15,23,42,.05);
    }
    .chip.active{
      color:#1847a8;
      background:var(--brand-soft);
      border-color:#bfd6fa;
    }
    .select-shell{
      min-height:40px;
      border-radius:var(--radius);
      border:1px solid #d8e5f3;
      background:#fff;
      color:#173055;
      padding:.45rem .8rem;
      outline:none;
      box-shadow:0 6px 16px rgba(15,23,42,.04);
    }
    .select-shell:focus,.search-shell input:focus,.search-shell button:focus,.chip:focus,.btn:focus,.nav-link:focus,.footer-link:focus{
      outline:2px solid rgba(37,99,235,.25);
      outline-offset:2px;
    }
    .search-shell{
      display:flex;
      align-items:center;
      gap:.5rem;
      padding:.42rem .6rem .42rem .8rem;
      min-height:46px;
      border-radius:var(--radius);
      border:1px solid #d8e5f3;
      background:#fff;
      box-shadow:0 6px 16px rgba(15,23,42,.05);
    }
    .search-shell input{
      width:220px;
      min-width:180px;
      border:none;
      outline:none;
      background:transparent;
      color:#10243f;
    }
    .search-shell input::placeholder{color:#94a3b8}
    .search-shell button{
      border:none;
      background:var(--brand-soft);
      color:#1847a8;
      border-radius:var(--radius-sm);
      padding:.58rem .9rem;
      font-weight:700;
      cursor:pointer;
    }
    .search-shell button:hover{background:#dce9ff}
    .content-card{
      overflow:hidden;
    }
    .content-card .cover{
      border-radius:var(--radius);
      position:relative;
      overflow:hidden;
      min-height:168px;
      background:
        linear-gradient(160deg,var(--cover-a) 0%,var(--cover-b) 100%);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
    }
    .content-card .cover::before{
      content:"";
      position:absolute;
      inset:14px;
      border-radius:6px;
      border:1px solid rgba(255,255,255,.18);
    }
    .content-card .cover::after{
      content:"";
      position:absolute;
      inset:auto 12px 12px 12px;
      height:34px;
      border-radius:6px;
      background:rgba(255,255,255,.84);
      box-shadow:0 10px 20px rgba(15,23,42,.08);
    }
    .content-card .cover-badge{
      position:absolute;
      z-index:1;
      top:12px;
      left:12px;
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.28rem .55rem;
      border-radius:999px;
      background:rgba(255,255,255,.94);
      color:#173055;
      border:1px solid rgba(255,255,255,.62);
      font-size:.72rem;
      font-weight:700;
    }
    .line-clamp-2{
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }
    .meta{
      color:var(--muted);
      font-size:.88rem;
    }
    .soft-list li{
      display:flex;
      gap:.65rem;
      align-items:flex-start;
      color:#334155;
      font-size:.94rem;
    }
    .soft-list li + li{margin-top:.7rem}
    .soft-list svg{flex:none;margin-top:.2rem;color:#2563eb}
    .faq-item{
      overflow:hidden;
    }
    .faq-item summary{
      list-style:none;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:18px 18px;
      font-weight:800;
      color:#173055;
    }
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item .answer{
      padding:0 18px 18px 18px;
      color:var(--muted);
      font-size:.96rem;
      line-height:1.75;
    }
    .footer-link{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:.6rem .9rem;
      border-radius:var(--radius);
      background:#f7fbff;
      border:1px solid #dce7f3;
      color:#35506f;
      font-weight:700;
    }
    .footer-link:hover{
      background:#eef5ff;
      border-color:#cfe0fb;
      color:#1847a8;
    }
    .menu-panel{
      border-bottom:1px solid #dbe5f1;
      background:rgba(255,255,255,.97);
    }
    .empty-state{
      display:none;
      padding:24px;
      border-radius:var(--radius);
      background:#fff;
      border:1px dashed #c8d7eb;
      color:var(--muted);
      text-align:center;
    }
    .mobile-actions{
      display:grid;
      gap:10px;
    }
    @media (max-width:1023px){
      .search-shell input{width:100%;min-width:0}
    }
    @media (max-width:767px){
      .nav-link{width:100%;justify-content:flex-start}
      .chip{width:100%}
      .toolbar .select-shell{width:100%}
      .mobile-stack{grid-template-columns:1fr}
    }