/* roulang page: index */
:root {
      color-scheme: light;
      --ink: #29231e;
      --ink-soft: #51483f;
      --muted: #81766b;
      --paper: #fff8ec;
      --paper-deep: #f5ecdc;
      --white: #fffdf9;
      --line: #e8ddcb;
      --orange: #e8753c;
      --citrus: #f4b83f;
      --plum: #70465a;
      --green: #3d7358;
      --shadow: 0 12px 30px rgba(54, 39, 24, .08);
      --shadow-hover: 0 18px 36px rgba(54, 39, 24, .14);
      --radius-sm: 8px;
      --radius-md: 14px;
      --radius-lg: 22px;
      --content: 1200px;
      --ease: 220ms ease;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 92px; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", system-ui, sans-serif;
      font-size: 16px;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }
    button, input, textarea { font: inherit; }
    button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
    button { color: inherit; }
    :focus-visible { outline: 3px solid rgba(232, 117, 60, .55); outline-offset: 3px; }
    ::selection { color: var(--ink); background: var(--citrus); }

    .container { width: min(var(--content), calc(100% - 64px)); margin-inline: auto; }
    .site-header {
      position: sticky;
      z-index: 50;
      top: 0;
      background: rgba(255, 248, 236, .97);
      border-bottom: 1px solid rgba(83, 66, 47, .12);
    }
    .nav-wrap {
      min-height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      flex: 0 0 auto;
      font-size: 20px;
      font-weight: 850;
      line-height: 1;
      letter-spacing: 0;
    }
    .brand-mark {
      width: 39px;
      height: 39px;
      display: grid;
      place-items: center;
      color: var(--ink);
      background: var(--citrus);
      border-radius: 12px 12px 12px 4px;
      box-shadow: 0 5px 12px rgba(244, 184, 63, .24);
    }
    .brand-mark::before {
      content: "";
      width: 0;
      height: 0;
      margin-left: 3px;
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      border-left: 12px solid var(--ink);
    }
    .brand-name { white-space: nowrap; }
    .nav-menu {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .nav-link {
      position: relative;
      display: inline-flex;
      align-items: center;
      min-height: 42px;
      padding: 8px 12px;
      color: var(--ink-soft);
      border-radius: 8px;
      font-size: 14px;
      font-weight: 700;
      transition: color var(--ease), background var(--ease), transform var(--ease);
    }
    .nav-link:hover, .nav-link[aria-current="page"] {
      color: var(--ink);
      background: #f7e9ca;
      transform: translateY(-2px);
    }
    .nav-action, .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 46px;
      padding: 11px 18px;
      border: 1px solid transparent;
      border-radius: 9px;
      font-weight: 800;
      line-height: 1.2;
      cursor: pointer;
      transition: transform var(--ease), background var(--ease), border-color var(--ease), box-shadow var(--ease);
    }
    .nav-action, .button-primary {
      color: var(--ink);
      background: var(--citrus);
      box-shadow: 0 5px 14px rgba(205, 142, 35, .16);
    }
    .nav-action:hover, .button-primary:hover {
      background: #efaa2d;
      box-shadow: 0 8px 18px rgba(205, 142, 35, .22);
      transform: translateY(-2px);
    }
    .button-secondary {
      color: var(--white);
      background: rgba(255, 253, 249, .08);
      border-color: rgba(255, 253, 249, .4);
    }
    .button-secondary:hover { color: var(--ink); background: var(--white); }
    .menu-toggle {
      display: none;
      width: 44px;
      height: 44px;
      padding: 0;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: 1px solid var(--line);
      border-radius: 9px;
      cursor: pointer;
    }
    .menu-toggle span, .menu-toggle::before, .menu-toggle::after {
      content: "";
      position: absolute;
      width: 18px;
      height: 2px;
      background: var(--ink);
      border-radius: 2px;
      transition: transform var(--ease), opacity var(--ease);
    }
    .menu-toggle { position: relative; }
    .menu-toggle::before { transform: translateY(-6px); }
    .menu-toggle::after { transform: translateY(6px); }
    .menu-toggle[aria-expanded="true"] span { opacity: 0; }
    .menu-toggle[aria-expanded="true"]::before { transform: rotate(45deg); }
    .menu-toggle[aria-expanded="true"]::after { transform: rotate(-45deg); }

    main { overflow: clip; }
    .hero {
      padding: 46px 0 36px;
      background: var(--paper);
    }
    .hero-grid {
      min-height: 500px;
      display: grid;
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      align-items: stretch;
      gap: 34px;
    }
    .hero-copy {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 26px 0 34px 10px;
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      width: fit-content;
      margin: 0 0 15px;
      color: var(--plum);
      font-size: 13px;
      font-weight: 850;
    }
    .eyebrow::before {
      content: "";
      width: 22px;
      height: 3px;
      background: var(--orange);
      border-radius: 3px;
    }
    h1, h2, h3, p { margin-top: 0; }
    .hero h1 {
      max-width: 540px;
      margin-bottom: 13px;
      font-size: clamp(40px, 5vw, 62px);
      font-weight: 900;
      line-height: 1.12;
      letter-spacing: 0;
    }
    .hero h1 em { color: var(--orange); font-style: normal; }
    .hero-subtitle {
      margin-bottom: 14px;
      color: var(--ink-soft);
      font-size: 19px;
      font-weight: 750;
    }
    .hero-description {
      max-width: 510px;
      margin-bottom: 23px;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.9;
    }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 11px; }
    .hero-actions .button-secondary {
      color: var(--ink);
      border-color: #d9cbb7;
      background: transparent;
    }
    .hero-actions .button-secondary:hover { background: #f7e9ca; }
    .hero-notes {
      display: flex;
      flex-wrap: wrap;
      gap: 12px 20px;
      margin-top: 24px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 650;
    }
    .hero-notes span { display: inline-flex; align-items: center; gap: 7px; }
    .hero-notes span::before {
      content: "";
      width: 7px;
      height: 7px;
      background: var(--green);
      border-radius: 50%;
    }
    .hero-art {
      position: relative;
      min-height: 470px;
      overflow: hidden;
      align-self: center;
      background: #342c25;
      border-radius: 20px 20px 20px 6px;
      box-shadow: var(--shadow);
      transform: translateY(12px);
    }
    .hero-art img {
      width: 100%;
      height: 100%;
      min-height: 470px;
      object-fit: cover;
      object-position: center;
      opacity: .89;
      transition: transform 600ms ease;
    }
    .hero-art:hover img { transform: scale(1.025); }
    .hero-art::after {
      content: "";
      position: absolute;
      inset: 35% 0 0;
      pointer-events: none;
      background: linear-gradient(transparent, rgba(26, 21, 18, .82));
    }
    .hero-caption {
      position: absolute;
      z-index: 2;
      right: 25px;
      bottom: 23px;
      left: 25px;
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 20px;
      color: white;
    }
    .hero-caption strong { display: block; font-size: 19px; }
    .hero-caption small { display: block; margin-top: 4px; color: rgba(255,255,255,.76); }
    .play-button {
      width: 50px;
      height: 50px;
      display: grid;
      flex: 0 0 auto;
      place-items: center;
      color: var(--ink);
      background: var(--citrus);
      border-radius: 50%;
      font-size: 17px;
      box-shadow: 0 4px 16px rgba(0,0,0,.22);
    }
    .hero-ribbon {
      position: absolute;
      z-index: 3;
      top: 21px;
      left: -1px;
      padding: 8px 13px 8px 17px;
      color: var(--ink);
      background: var(--citrus);
      border-radius: 0 7px 7px 0;
      font-size: 12px;
      font-weight: 900;
    }

    .section { padding: 72px 0; }
    .section-paper { background: var(--paper); }
    .section-soft { background: var(--paper-deep); }
    .section-dark { color: var(--white); background: #29231f; }
    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 28px;
      margin-bottom: 30px;
    }
    .section-head-copy { max-width: 730px; }
    .section-kicker {
      margin-bottom: 6px;
      color: var(--orange);
      font-size: 12px;
      font-weight: 900;
    }
    .section h2 {
      margin-bottom: 8px;
      font-size: clamp(27px, 3.2vw, 38px);
      font-weight: 900;
      line-height: 1.25;
      letter-spacing: 0;
    }
    .section-intro {
      max-width: 780px;
      margin-bottom: 0;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.85;
    }
    .section-dark .section-intro { color: #c8bdb1; }
    .section-dark .section-kicker { color: var(--citrus); }
    .text-link {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      flex: 0 0 auto;
      padding: 8px 0;
      color: var(--plum);
      font-size: 14px;
      font-weight: 800;
      transition: gap var(--ease), color var(--ease);
    }
    .text-link:hover { gap: 11px; color: var(--orange); }

    .highlights {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }
    .highlight {
      min-height: 150px;
      display: flex;
      gap: 17px;
      padding: 25px 24px;
      border-right: 1px solid var(--line);
    }
    .highlight:first-child { padding-left: 0; }
    .highlight:last-child { padding-right: 0; border-right: 0; }
    .highlight-number {
      color: var(--orange);
      font-size: 14px;
      font-weight: 900;
    }
    .highlight h3 { margin-bottom: 6px; font-size: 17px; }
    .highlight p { margin-bottom: 0; color: var(--muted); font-size: 14px; line-height: 1.75; }

    .channel-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    .channel-card {
      position: relative;
      min-height: 205px;
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: end;
      gap: 20px;
      padding: 25px 26px;
      overflow: hidden;
      color: var(--white);
      background: #332a24;
      border-radius: var(--radius-md);
      transition: transform var(--ease), box-shadow var(--ease);
    }
    .channel-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
    .channel-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(32,25,21,.88), rgba(32,25,21,.26));
    }
    .channel-card img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: .68;
      transition: transform 500ms ease;
    }
    .channel-card:hover img { transform: scale(1.04); }
    .channel-content, .channel-arrow { position: relative; z-index: 1; }
    .channel-tag {
      display: inline-flex;
      margin-bottom: 10px;
      padding: 4px 9px;
      color: var(--ink);
      background: var(--citrus);
      border-radius: 5px;
      font-size: 11px;
      font-weight: 900;
    }
    .channel-card h3 { margin-bottom: 7px; font-size: 24px; }
    .channel-card p { max-width: 470px; margin-bottom: 0; color: rgba(255,255,255,.8); font-size: 14px; }
    .channel-arrow {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      color: var(--ink);
      background: var(--white);
      border-radius: 50%;
      font-size: 20px;
    }

    .filter-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin: -4px 0 22px;
    }
    .filter-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
    .filter-chip {
      min-height: 36px;
      padding: 7px 13px;
      color: var(--ink-soft);
      background: transparent;
      border: 1px solid var(--line);
      border-radius: 999px;
      font-size: 13px;
      font-weight: 750;
      cursor: pointer;
      transition: color var(--ease), background var(--ease), border-color var(--ease);
    }
    .filter-chip:hover, .filter-chip[aria-pressed="true"] {
      color: var(--ink);
      background: #f8e8c5;
      border-color: #e7bd65;
    }
    .search-box {
      width: min(250px, 100%);
      min-height: 40px;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 12px;
      color: var(--muted);
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 8px;
    }
    .search-box input {
      width: 100%;
      min-width: 0;
      color: var(--ink);
      background: transparent;
      border: 0;
      outline: 0;
      font-size: 13px;
    }
    .search-box:focus-within { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(232,117,60,.12); }

    .release-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 22px 15px;
    }
    .poster-card { min-width: 0; }
    .poster-link { display: block; }
    .poster {
      position: relative;
      aspect-ratio: 3 / 4;
      overflow: hidden;
      background: #3b322b;
      border-radius: 10px;
      isolation: isolate;
    }
    .poster::before {
      content: "黄果视频";
      position: absolute;
      z-index: -1;
      inset: 0;
      display: grid;
      place-items: center;
      color: rgba(255,255,255,.78);
      font-size: 22px;
      font-weight: 900;
    }
    .poster img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 400ms ease, filter 400ms ease;
    }
    .poster-link:hover .poster img { transform: scale(1.045); filter: brightness(.78); }
    .poster-link:focus-visible { border-radius: 11px; }
    .badge {
      position: absolute;
      z-index: 2;
      top: 9px;
      left: 9px;
      display: inline-flex;
      align-items: center;
      min-height: 23px;
      padding: 3px 7px;
      color: var(--ink);
      background: var(--citrus);
      border-radius: 4px;
      font-size: 10px;
      font-weight: 900;
      line-height: 1.2;
    }
    .badge-orange { color: white; background: var(--orange); }
    .badge-plum { color: white; background: var(--plum); }
    .badge-purple { color: #fff; background: #655180; }
    .play-overlay {
      position: absolute;
      z-index: 2;
      inset: 0;
      display: grid;
      place-items: center;
      color: white;
      opacity: 0;
      transition: opacity var(--ease);
    }
    .play-overlay span {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      padding-left: 3px;
      background: rgba(244,184,63,.94);
      border-radius: 50%;
      color: var(--ink);
      font-size: 16px;
    }
    .poster-link:hover .play-overlay { opacity: 1; }
    .poster-info { padding: 10px 2px 0; }
    .poster-info h3 {
      display: -webkit-box;
      min-height: 48px;
      margin-bottom: 5px;
      overflow: hidden;
      font-size: 15px;
      font-weight: 800;
      line-height: 1.55;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .poster-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 7px;
      color: var(--muted);
      font-size: 11px;
    }
    .poster-score { color: var(--plum); font-size: 13px; font-weight: 900; }
    .poster-update { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
    .empty-state {
      display: none;
      padding: 26px;
      color: var(--muted);
      text-align: center;
      border: 1px dashed var(--line);
      border-radius: var(--radius-sm);
    }

    .feature-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      grid-auto-rows: minmax(210px, auto);
      gap: 14px;
    }
    .feature-card {
      position: relative;
      min-height: 215px;
      display: flex;
      align-items: end;
      padding: 20px;
      overflow: hidden;
      color: white;
      background: #322923;
      border-radius: 12px;
      isolation: isolate;
    }
    .feature-card:first-child { grid-column: span 2; grid-row: span 2; min-height: 444px; }
    .feature-card img {
      position: absolute;
      z-index: -2;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 450ms ease;
    }
    .feature-card::after {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 0;
      background: linear-gradient(0deg, rgba(27,21,18,.88), rgba(27,21,18,.02) 76%);
    }
    .feature-card:hover img { transform: scale(1.04); }
    .feature-copy { max-width: 420px; }
    .feature-copy .badge { position: static; margin-bottom: 9px; }
    .feature-copy h3 { margin-bottom: 4px; font-size: 21px; }
    .feature-copy p { margin-bottom: 0; color: rgba(255,255,255,.8); font-size: 13px; }
    .feature-score { margin-left: 8px; color: var(--citrus); font-size: 13px; font-weight: 900; }

    .news-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 28px;
      border-top: 1px solid var(--line);
    }
    .news-item {
      display: grid;
      grid-template-columns: 124px minmax(0,1fr);
      gap: 16px;
      align-items: center;
      min-height: 142px;
      padding: 16px 0;
      border-bottom: 1px solid var(--line);
    }
    .news-thumb {
      position: relative;
      aspect-ratio: 16 / 10;
      overflow: hidden;
      background: #332a24;
      border-radius: 8px;
    }
    .news-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 350ms ease;
    }
    .news-item:hover .news-thumb img { transform: scale(1.05); }
    .news-type {
      display: inline-flex;
      margin-bottom: 5px;
      color: var(--plum);
      font-size: 11px;
      font-weight: 900;
    }
    .news-item h3 { margin-bottom: 5px; font-size: 15px; line-height: 1.5; }
    .news-item p { margin-bottom: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
    .news-date { display: block; margin-top: 5px; color: #94897d; font-size: 11px; }

    .metric-band {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      border-top: 1px solid rgba(255,255,255,.18);
      border-bottom: 1px solid rgba(255,255,255,.18);
    }
    .metric {
      padding: 25px 24px;
      border-right: 1px solid rgba(255,255,255,.18);
    }
    .metric:first-child { padding-left: 0; }
    .metric:last-child { padding-right: 0; border-right: 0; }
    .metric strong {
      display: block;
      margin-bottom: 4px;
      color: var(--citrus);
      font-size: 36px;
      font-weight: 900;
      line-height: 1.2;
    }
    .metric span { color: rgba(255,255,255,.78); font-size: 13px; }
    .metric-bar { height: 4px; margin-top: 14px; overflow: hidden; background: rgba(255,255,255,.16); border-radius: 5px; }
    .metric-bar i { display: block; height: 100%; background: var(--orange); border-radius: inherit; }

    .compare-layout {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 30px;
      align-items: start;
    }
    .compare-table {
      width: 100%;
      border-collapse: collapse;
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 12px;
      overflow: hidden;
    }
    .compare-table th, .compare-table td {
      padding: 14px 16px;
      border-bottom: 1px solid var(--line);
      text-align: left;
      font-size: 13px;
    }
    .compare-table th { color: var(--muted); background: #f7f0e4; font-size: 12px; }
    .compare-table tr:last-child td { border-bottom: 0; }
    .compare-table td:first-child { font-weight: 800; }
    .compare-table td:last-child { color: var(--plum); font-weight: 800; }
    .compare-notes {
      display: grid;
      gap: 12px;
    }
    .compare-note {
      padding: 17px 19px;
      background: #f4ead9;
      border-left: 3px solid var(--orange);
      border-radius: 0 9px 9px 0;
    }
    .compare-note strong { display: block; margin-bottom: 3px; font-size: 15px; }
    .compare-note p { margin: 0; color: var(--muted); font-size: 13px; }

    .timeline {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      padding-top: 16px;
    }
    .timeline::before {
      content: "";
      position: absolute;
      top: 23px;
      right: 8%;
      left: 8%;
      height: 2px;
      background: #decfb8;
    }
    .timeline-item { position: relative; padding-top: 32px; }
    .timeline-dot {
      position: absolute;
      top: 0;
      left: 0;
      width: 16px;
      height: 16px;
      background: var(--orange);
      border: 4px solid var(--paper);
      border-radius: 50%;
      box-shadow: 0 0 0 1px var(--orange);
    }
    .timeline-item:nth-child(2) .timeline-dot { background: var(--citrus); box-shadow: 0 0 0 1px #d3a034; }
    .timeline-item:nth-child(4) .timeline-dot { background: #aaa097; box-shadow: 0 0 0 1px #aaa097; }
    .timeline-date { display: block; margin-bottom: 4px; color: var(--orange); font-size: 12px; font-weight: 900; }
    .timeline-item h3 { margin-bottom: 4px; font-size: 16px; }
    .timeline-item p { margin: 0; color: var(--muted); font-size: 13px; }

    .rank-layout {
      display: grid;
      grid-template-columns: 1fr .8fr;
      gap: 34px;
    }
    .rank-list { margin: 0; padding: 0; list-style: none; }
    .rank-row {
      display: grid;
      grid-template-columns: 48px minmax(0,1fr) auto;
      align-items: center;
      gap: 14px;
      min-height: 62px;
      padding: 9px 12px;
      border-bottom: 1px solid var(--line);
      transition: background var(--ease);
    }
    .rank-row:hover { background: #f8eddc; }
    .rank-row:nth-child(-n+3) { background: #f7eddd; }
    .rank-number { color: #918477; font-size: 20px; font-weight: 900; text-align: center; }
    .rank-row:nth-child(1) .rank-number, .rank-row:nth-child(2) .rank-number, .rank-row:nth-child(3) .rank-number { color: var(--orange); }
    .rank-title { display: block; font-size: 14px; font-weight: 800; }
    .rank-category { display: block; color: var(--muted); font-size: 11px; }
    .rank-score { color: var(--plum); font-size: 14px; font-weight: 900; }
    .rank-side {
      position: relative;
      min-height: 390px;
      display: flex;
      flex-direction: column;
      justify-content: end;
      padding: 25px;
      overflow: hidden;
      color: white;
      background: #342c25;
      border-radius: 12px;
    }
    .rank-side img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: .63; }
    .rank-side::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(31,24,20,.92), transparent 85%); }
    .rank-side > *:not(img) { position: relative; z-index: 1; }
    .rank-side .section-kicker { color: var(--citrus); }
    .rank-side h3 { margin-bottom: 8px; font-size: 24px; }
    .rank-side p { margin-bottom: 0; color: rgba(255,255,255,.8); font-size: 14px; }

    .assurance-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border-top: 1px solid rgba(255,255,255,.16);
      border-bottom: 1px solid rgba(255,255,255,.16);
    }
    .assurance-item { padding: 22px 20px; border-right: 1px solid rgba(255,255,255,.16); }
    .assurance-item:first-child { padding-left: 0; }
    .assurance-item:last-child { padding-right: 0; border-right: 0; }
    .assurance-symbol {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      margin-bottom: 11px;
      color: var(--ink);
      background: var(--citrus);
      border-radius: 8px;
      font-size: 16px;
      font-weight: 900;
    }
    .assurance-item h3 { margin-bottom: 4px; font-size: 15px; }
    .assurance-item p { margin-bottom: 0; color: #c8bdb1; font-size: 12px; }

    .quick-links { display: flex; flex-wrap: wrap; gap: 10px; }
    .quick-link {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-height: 46px;
      padding: 10px 14px;
      color: var(--ink-soft);
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 8px;
      font-size: 14px;
      font-weight: 750;
      transition: border-color var(--ease), background var(--ease), transform var(--ease);
    }
    .quick-link::after { content: "↗"; color: var(--orange); font-weight: 900; }
    .quick-link:hover { background: #f8eddc; border-color: #e4bd73; transform: translateY(-2px); }

    .faq-list { display: grid; gap: 10px; max-width: 920px; }
    .faq-item {
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 10px;
    }
    .faq-question {
      width: 100%;
      min-height: 58px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 15px 18px;
      background: transparent;
      border: 0;
      border-radius: inherit;
      text-align: left;
      font-weight: 800;
      cursor: pointer;
    }
    .faq-question:hover { color: var(--plum); }
    .faq-icon {
      width: 25px;
      height: 25px;
      display: grid;
      flex: 0 0 auto;
      place-items: center;
      color: var(--ink);
      background: #f7e9ca;
      border-radius: 50%;
      font-size: 17px;
      line-height: 1;
    }
    .faq-answer { padding: 0 18px 17px; color: var(--muted); font-size: 14px; line-height: 1.85; }
    .faq-answer[hidden] { display: none; }
    .faq-item[open] { border-color: #e0c58b; }

    .suggestion-section { padding: 68px 0 78px; background: #f1dfbf; }
    .suggestion-panel {
      display: grid;
      grid-template-columns: .88fr 1.12fr;
      gap: 38px;
      align-items: start;
      padding: 34px;
      background: var(--white);
      border: 1px solid #e9d8b8;
      border-radius: 14px;
      box-shadow: var(--shadow);
    }
    .suggestion-copy h2 { margin-bottom: 10px; font-size: 32px; line-height: 1.25; }
    .suggestion-copy p { margin-bottom: 13px; color: var(--muted); font-size: 14px; }
    .privacy-note { color: #786e63 !important; font-size: 12px !important; }
    .suggestion-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .field { display: grid; gap: 6px; }
    .field-wide { grid-column: 1 / -1; }
    .field label { color: var(--ink-soft); font-size: 12px; font-weight: 800; }
    .field input, .field textarea {
      width: 100%;
      min-height: 46px;
      padding: 11px 12px;
      color: var(--ink);
      background: #fffaf2;
      border: 1px solid #dfd2c1;
      border-radius: 8px;
      transition: border-color var(--ease), box-shadow var(--ease), background var(--ease);
    }
    .field textarea { min-height: 112px; resize: vertical; }
    .field input::placeholder, .field textarea::placeholder { color: #a3978b; }
    .field input:focus, .field textarea:focus {
      outline: 0;
      background: white;
      border-color: var(--orange);
      box-shadow: 0 0 0 3px rgba(232,117,60,.14);
    }
    .field input:disabled, .field textarea:disabled { color: #8f867c; background: #f0ece5; cursor: not-allowed; }
    .form-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; }
    .form-status { min-height: 24px; margin: 0; color: var(--green); font-size: 13px; font-weight: 750; }
    .form-status.error { color: #b33c2f; }

    .site-footer { color: #eee4d8; background: #29231f; }
    .footer-main {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr;
      gap: 46px;
      padding: 48px 0 34px;
    }
    .footer-brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 13px; font-size: 19px; font-weight: 900; }
    .footer-brand .brand-mark { width: 34px; height: 34px; border-radius: 10px 10px 10px 4px; }
    .footer-about { max-width: 390px; margin-bottom: 0; color: #bdb1a5; font-size: 13px; }
    .footer-column h2 { margin-bottom: 12px; color: var(--citrus); font-size: 13px; }
    .footer-links { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
    .footer-links a { color: #cfc4b8; font-size: 13px; transition: color var(--ease); }
    .footer-links a:hover { color: var(--citrus); }
    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 17px 0 20px;
      color: #aa9e92;
      border-top: 1px solid rgba(255,255,255,.13);
      font-size: 12px;
    }
    .footer-bottom p { margin: 0; }
    .back-top { color: var(--citrus); font-weight: 800; }

    @media (max-width: 1100px) {
      .container { width: min(var(--content), calc(100% - 48px)); }
      .nav-wrap { gap: 15px; }
      .nav-menu { gap: 2px; }
      .nav-link { padding-inline: 9px; font-size: 13px; }
      .release-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .feature-card:first-child { grid-row: span 2; }
    }
    @media (max-width: 900px) {
      .nav-wrap { min-height: 70px; }
      .menu-toggle { display: inline-flex; }
      .nav-menu {
        position: absolute;
        top: calc(100% + 1px);
        right: 0;
        left: 0;
        display: none;
        align-items: stretch;
        padding: 12px 24px 18px;
        background: var(--paper);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 12px 18px rgba(54,39,24,.08);
      }
      .nav-menu.is-open { display: flex; flex-direction: column; }
      .nav-menu li { width: 100%; }
      .nav-link { width: 100%; min-height: 46px; }
      .nav-action { justify-content: center; margin-top: 5px; }
      .hero-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
      .hero-art, .hero-art img { min-height: 410px; }
      .section { padding: 60px 0; }
      .news-list { grid-template-columns: 1fr; }
      .compare-layout, .rank-layout { grid-template-columns: 1fr; }
      .rank-side { min-height: 280px; }
    }
    @media (max-width: 767px) {
      .container { width: min(var(--content), calc(100% - 36px)); }
      .hero { padding-top: 24px; }
      .hero-grid { grid-template-columns: 1fr; gap: 18px; }
      .hero-copy { padding: 19px 0 0; }
      .hero h1 { font-size: 42px; }
      .hero-description { font-size: 14px; }
      .hero-art, .hero-art img { min-height: 350px; }
      .hero-art { transform: none; }
      .section { padding: 52px 0; }
      .section-head { align-items: start; flex-direction: column; gap: 12px; margin-bottom: 23px; }
      .highlights { grid-template-columns: 1fr; }
      .highlight, .highlight:first-child, .highlight:last-child {
        min-height: 0;
        padding: 18px 0;
        border-right: 0;
        border-bottom: 1px solid var(--line);
      }
      .highlight:last-child { border-bottom: 0; }
      .channel-grid { grid-template-columns: 1fr; }
      .channel-card { min-height: 190px; }
      .filter-row { align-items: stretch; flex-direction: column; }
      .filter-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
      .filter-chip { flex: 0 0 auto; }
      .search-box { width: 100%; }
      .release-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 12px; }
      .feature-grid { grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows: minmax(190px, auto); }
      .feature-card:first-child { grid-column: span 2; grid-row: auto; min-height: 320px; }
      .feature-card { min-height: 195px; padding: 16px; }
      .news-item { grid-template-columns: 110px minmax(0,1fr); gap: 13px; min-height: 125px; }
      .metric-band { grid-template-columns: repeat(2,1fr); }
      .metric, .metric:first-child, .metric:last-child { padding: 18px 14px; border-bottom: 1px solid rgba(255,255,255,.18); }
      .metric:nth-child(2) { border-right: 0; }
      .metric:nth-child(n+3) { border-bottom: 0; }
      .metric strong { font-size: 30px; }
      .timeline { grid-template-columns: 1fr 1fr; gap: 20px 14px; }
      .timeline::before { display: none; }
      .assurance-grid { grid-template-columns: 1fr 1fr; }
      .assurance-item, .assurance-item:first-child, .assurance-item:last-child {
        padding: 18px 14px;
        border-bottom: 1px solid rgba(255,255,255,.16);
      }
      .assurance-item:nth-child(2) { border-right: 0; }
      .assurance-item:nth-child(n+3) { border-bottom: 0; }
      .suggestion-section { padding: 48px 0; }
      .suggestion-panel { grid-template-columns: 1fr; gap: 22px; padding: 23px; }
      .suggestion-copy h2 { font-size: 27px; }
      .footer-main { grid-template-columns: 1fr 1fr; gap: 28px; padding-top: 38px; }
      .footer-about-column { grid-column: 1 / -1; }
    }
    @media (max-width: 520px) {
      .container { width: min(var(--content), calc(100% - 32px)); }
      .brand { gap: 8px; font-size: 18px; }
      .brand-mark { width: 36px; height: 36px; }
      .nav-menu { padding-inline: 16px; }
      .hero h1 { font-size: 36px; }
      .hero-subtitle { font-size: 16px; }
      .hero-art, .hero-art img { min-height: 300px; }
      .hero-caption { right: 17px; bottom: 17px; left: 17px; }
      .hero-caption strong { font-size: 16px; }
      .play-button { width: 44px; height: 44px; }
      .section { padding: 45px 0; }
      .section h2 { font-size: 27px; }
      .release-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px 13px; }
      .poster-info h3 { font-size: 14px; }
      .feature-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
      .feature-card:first-child { min-height: 270px; }
      .feature-card { min-height: 180px; padding: 13px; }
      .feature-copy h3 { font-size: 17px; }
      .feature-copy p { font-size: 12px; }
      .news-item { grid-template-columns: 94px minmax(0,1fr); gap: 11px; }
      .news-item h3 { font-size: 13px; }
      .news-item p { font-size: 11px; }
      .compare-table th, .compare-table td { padding: 11px 9px; font-size: 11px; }
      .rank-layout { gap: 20px; }
      .rank-row { grid-template-columns: 36px minmax(0,1fr) auto; gap: 8px; padding-inline: 6px; }
      .rank-number { font-size: 17px; }
      .rank-title { font-size: 13px; }
      .suggestion-panel { padding: 19px; }
      .suggestion-form { grid-template-columns: 1fr; }
      .field-wide, .form-actions { grid-column: auto; }
      .form-actions { align-items: stretch; flex-direction: column; }
      .form-actions .button { width: 100%; }
      .footer-main { grid-template-columns: 1fr 1fr; gap: 22px 14px; }
      .footer-bottom { align-items: start; flex-direction: column; gap: 8px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
    }

/* roulang page: category1 */
:root {
      color-scheme: light;
      --ink: #29231e;
      --ink-soft: #51483f;
      --muted: #81766b;
      --paper: #fff8ec;
      --paper-deep: #f5ecdc;
      --white: #fffdf9;
      --line: #e8ddcb;
      --orange: #e8753c;
      --citrus: #f4b83f;
      --plum: #70465a;
      --green: #3d7358;
      --shadow: 0 12px 30px rgba(54, 39, 24, .08);
      --shadow-hover: 0 18px 36px rgba(54, 39, 24, .14);
      --radius-sm: 8px;
      --radius-md: 14px;
      --radius-lg: 22px;
      --content: 1200px;
      --ease: 220ms ease;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 92px; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", system-ui, sans-serif;
      font-size: 16px;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }
    button, input, textarea, select { font: inherit; }
    button, a, input, select { -webkit-tap-highlight-color: transparent; }
    button { color: inherit; }
    :focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
    .container { width: min(var(--content), calc(100% - 64px)); margin-inline: auto; }
    .section {
      padding: 76px 0;
      border-top: 1px solid rgba(83, 66, 47, .08);
    }
    .section-soft { background: var(--paper-deep); }
    .section-dark {
      color: var(--white);
      background: #29231e;
    }
    .section-heading {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 28px;
    }
    .section-heading h2 {
      margin: 0;
      font-size: clamp(26px, 3vw, 38px);
      line-height: 1.2;
      letter-spacing: -.02em;
    }
    .section-heading p {
      max-width: 520px;
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 15px;
    }
    .section-dark .section-heading p { color: #cfc2b4; }
    .crumbs {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
      color: var(--muted);
      font-size: 13px;
    }
    .crumbs a:hover { color: var(--orange); }
    .category-intro {
      position: relative;
      overflow: hidden;
      padding: 48px 0 54px;
      background:
        linear-gradient(90deg, rgba(41,35,30,.93) 0%, rgba(41,35,30,.78) 44%, rgba(41,35,30,.35) 100%),
        url('/assets/images/e43ac87ab994fb67.jpg') center/cover no-repeat;
      color: var(--white);
    }
    .category-intro::after {
      content: "";
      position: absolute;
      right: 8%;
      bottom: -78px;
      width: 210px;
      height: 210px;
      border: 1px solid rgba(244,184,63,.35);
      border-radius: 50%;
      box-shadow: 0 0 0 26px rgba(244,184,63,.06), 0 0 0 52px rgba(244,184,63,.04);
    }
    .intro-layout {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
      align-items: center;
      gap: 50px;
    }
    .intro-copy h1 {
      max-width: 660px;
      margin: 0 0 15px;
      font-size: clamp(36px, 5vw, 60px);
      line-height: 1.13;
      letter-spacing: -.035em;
    }
    .intro-copy h1 em { color: var(--citrus); font-style: normal; }
    .intro-copy p {
      max-width: 650px;
      margin: 0;
      color: #e3d8ca;
      font-size: 17px;
      line-height: 1.9;
    }
    .intro-label {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 13px;
      color: var(--citrus);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .08em;
    }
    .intro-label::before {
      content: "";
      width: 24px;
      height: 3px;
      background: var(--orange);
      border-radius: 4px;
    }
    .intro-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .intro-stat {
      padding: 20px;
      border: 1px solid rgba(255,253,249,.18);
      border-radius: var(--radius-md);
      background: rgba(255,253,249,.09);
      backdrop-filter: blur(3px);
    }
    .intro-stat strong {
      display: block;
      margin-bottom: 3px;
      color: var(--citrus);
      font-size: 30px;
      line-height: 1.1;
    }
    .intro-stat span { color: #ded2c4; font-size: 13px; }
    .filter-panel {
      display: grid;
      grid-template-columns: 1.35fr 1fr 1fr 1fr auto;
      gap: 12px;
      align-items: end;
      padding: 20px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: var(--white);
      box-shadow: var(--shadow);
    }
    .filter-group label {
      display: block;
      margin-bottom: 6px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }
    .filter-group select {
      width: 100%;
      min-height: 44px;
      padding: 8px 34px 8px 12px;
      color: var(--ink);
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      outline: 0;
      background: var(--paper);
      cursor: pointer;
    }
    .filter-group select:hover,
    .filter-group select:focus { border-color: var(--orange); }
    .filter-state {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 8px 13px;
      color: var(--ink);
      border: 1px solid #decaa9;
      border-radius: var(--radius-sm);
      background: #fbefd5;
      font-size: 13px;
      font-weight: 800;
      white-space: nowrap;
    }
    .filter-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      margin-top: 16px;
    }
    .filter-tag {
      padding: 6px 13px;
      color: var(--ink-soft);
      border: 1px solid var(--line);
      border-radius: 99px;
      background: transparent;
      font-size: 13px;
      cursor: pointer;
      transition: var(--ease);
    }
    .filter-tag:hover, .filter-tag.active {
      color: var(--ink);
      border-color: var(--citrus);
      background: #f9e9c2;
      transform: translateY(-2px);
    }
    .movie-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 292px;
      gap: 28px;
      align-items: start;
    }
    .movie-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }
    .movie-card {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: var(--white);
      box-shadow: 0 7px 20px rgba(54,39,24,.05);
      transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
    }
    .movie-card:hover {
      border-color: #e8b45c;
      box-shadow: var(--shadow-hover);
      transform: translateY(-4px);
    }
    .movie-cover {
      position: relative;
      overflow: hidden;
      aspect-ratio: 16 / 10;
      background: #44382f;
    }
    .movie-cover img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 360ms ease;
    }
    .movie-card:hover .movie-cover img { transform: scale(1.045); }
    .movie-cover::after {
      content: "▶";
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      color: var(--white);
      font-size: 24px;
      opacity: 0;
      background: rgba(41,35,30,.42);
      transition: opacity var(--ease);
    }
    .movie-card:hover .movie-cover::after { opacity: 1; }
    .badge {
      position: absolute;
      z-index: 1;
      top: 11px;
      left: 11px;
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 3px 8px;
      color: var(--ink);
      border-radius: 5px;
      background: var(--citrus);
      font-size: 11px;
      font-weight: 900;
      line-height: 1;
    }
    .badge.orange { color: var(--white); background: var(--orange); }
    .badge.purple { color: var(--white); background: var(--plum); }
    .movie-info { padding: 15px 16px 16px; }
    .movie-info h3 {
      overflow: hidden;
      display: -webkit-box;
      min-height: 48px;
      margin: 0 0 8px;
      font-size: 17px;
      line-height: 1.45;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .movie-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      color: var(--muted);
      font-size: 12px;
    }
    .rating {
      color: var(--orange);
      font-size: 15px;
      font-weight: 900;
    }
    .movie-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 12px;
    }
    .movie-tags span {
      padding: 3px 7px;
      color: var(--muted);
      border-radius: 4px;
      background: var(--paper-deep);
      font-size: 11px;
    }
    .more-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 24px;
      color: var(--plum);
      font-size: 14px;
      font-weight: 850;
      border-bottom: 2px solid var(--citrus);
      transition: color var(--ease), gap var(--ease);
    }
    .more-link:hover { gap: 13px; color: var(--orange); }
    .side-panel {
      position: sticky;
      top: 100px;
      padding: 22px;
      color: var(--white);
      border-radius: var(--radius-md);
      background: #302a26;
      box-shadow: var(--shadow);
    }
    .side-panel h2 {
      margin: 0 0 18px;
      font-size: 20px;
      line-height: 1.3;
    }
    .side-note {
      margin: -8px 0 18px;
      color: #c9bbad;
      font-size: 13px;
    }
    .ranking-list {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .ranking-item {
      display: grid;
      grid-template-columns: 32px 1fr auto;
      align-items: center;
      gap: 9px;
      padding: 12px 0;
      border-top: 1px solid rgba(255,253,249,.13);
    }
    .ranking-number {
      color: #b7a899;
      font-size: 18px;
      font-weight: 900;
    }
    .ranking-item:nth-child(-n+3) .ranking-number { color: var(--citrus); }
    .ranking-title {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 13px;
      font-weight: 750;
    }
    .ranking-score {
      color: var(--citrus);
      font-size: 13px;
      font-weight: 850;
    }
    .progress-wrap {
      margin-top: 22px;
      padding-top: 18px;
      border-top: 1px solid rgba(255,253,249,.13);
    }
    .progress-line {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 7px;
      color: #d7cabd;
      font-size: 12px;
    }
    .progress-track {
      overflow: hidden;
      height: 7px;
      border-radius: 10px;
      background: rgba(255,255,255,.14);
    }
    .progress-track i {
      display: block;
      width: 78%;
      height: 100%;
      border-radius: inherit;
      background: var(--citrus);
    }
    .timeline {
      position: relative;
      display: grid;
      gap: 0;
      max-width: 900px;
      margin: 0 auto;
    }
    .timeline::before {
      content: "";
      position: absolute;
      top: 10px;
      bottom: 10px;
      left: 94px;
      width: 1px;
      background: #d8c8b2;
    }
    .timeline-row {
      position: relative;
      display: grid;
      grid-template-columns: 78px 32px 1fr;
      gap: 16px;
      align-items: start;
      min-height: 80px;
    }
    .timeline-date {
      padding-top: 2px;
      color: var(--muted);
      font-size: 13px;
      text-align: right;
    }
    .timeline-dot {
      position: relative;
      z-index: 1;
      width: 13px;
      height: 13px;
      margin-top: 6px;
      border: 3px solid var(--paper);
      border-radius: 50%;
      background: var(--orange);
      box-shadow: 0 0 0 1px var(--orange);
    }
    .timeline-row.done .timeline-dot { background: var(--green); box-shadow: 0 0 0 1px var(--green); }
    .timeline-row.wait .timeline-dot { background: #b6a99b; box-shadow: 0 0 0 1px #b6a99b; }
    .timeline-content {
      padding: 0 0 22px;
    }
    .timeline-content strong {
      display: block;
      margin-bottom: 3px;
      font-size: 16px;
    }
    .timeline-content span {
      color: var(--muted);
      font-size: 13px;
    }
    .status-pill {
      display: inline-flex;
      margin-left: 7px;
      padding: 2px 7px;
      color: var(--white);
      border-radius: 4px;
      background: var(--orange);
      font-size: 11px;
      font-weight: 800;
      vertical-align: 2px;
    }
    .status-pill.green { background: var(--green); }
    .status-pill.gray { color: var(--ink-soft); background: #ddd2c4; }
    .guide-grid {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 26px;
      align-items: stretch;
    }
    .guide-card {
      padding: 26px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: var(--white);
    }
    .guide-card h3 {
      margin: 0 0 14px;
      font-size: 20px;
    }
    .guide-card p { margin: 0; color: var(--muted); }
    .guide-list {
      display: grid;
      gap: 13px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .guide-list li {
      display: grid;
      grid-template-columns: 76px 1fr;
      gap: 14px;
      padding-bottom: 12px;
      border-bottom: 1px dashed var(--line);
    }
    .guide-list li:last-child { padding-bottom: 0; border-bottom: 0; }
    .guide-list b { color: var(--plum); font-size: 13px; }
    .guide-list span { color: var(--ink-soft); font-size: 14px; }
    .news-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .news-card {
      display: grid;
      grid-template-columns: 108px 1fr;
      gap: 14px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: var(--white);
      transition: transform var(--ease), box-shadow var(--ease);
    }
    .news-card:hover {
      box-shadow: var(--shadow);
      transform: translateY(-3px);
    }
    .news-thumb {
      overflow: hidden;
      aspect-ratio: 1 / 1;
      border-radius: 9px;
      background: var(--paper-deep);
    }
    .news-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .news-card h3 {
      overflow: hidden;
      display: -webkit-box;
      margin: 3px 0 8px;
      font-size: 15px;
      line-height: 1.45;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .news-card time, .news-card small { color: var(--muted); font-size: 11px; }
    .news-label {
      display: inline-block;
      color: var(--plum);
      font-size: 11px;
      font-weight: 800;
    }
    .faq-layout {
      display: grid;
      grid-template-columns: .7fr 1.3fr;
      gap: 45px;
      align-items: start;
    }
    .faq-intro h2 {
      margin: 0 0 14px;
      font-size: clamp(27px, 3vw, 38px);
      line-height: 1.2;
    }
    .faq-intro p { margin: 0; color: var(--muted); }
    .faq-list { display: grid; gap: 10px; }
    .faq-item {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: var(--white);
    }
    .faq-item summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 17px 19px;
      cursor: pointer;
      font-weight: 800;
      list-style: none;
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after {
      content: "+";
      color: var(--orange);
      font-size: 22px;
      font-weight: 400;
    }
    .faq-item[open] summary::after { content: "−"; }
    .faq-answer {
      padding: 0 19px 17px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.8;
    }
    .site-footer {
      padding: 54px 0 20px;
      color: #ddd0c2;
      background: #29231e;
    }
    .footer-main {
      display: grid;
      grid-template-columns: 1.35fr 1fr 1fr;
      gap: 48px;
      padding-bottom: 40px;
    }
    .footer-brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      color: var(--white);
      font-size: 20px;
      font-weight: 850;
    }
    .footer-brand .brand-mark { flex: 0 0 auto; }
    .footer-about {
      max-width: 330px;
      margin: 18px 0 0;
      color: #b9aa9b;
      font-size: 14px;
    }
    .footer-column h2 {
      margin: 3px 0 14px;
      color: var(--citrus);
      font-size: 15px;
    }
    .footer-links {
      display: grid;
      gap: 9px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .footer-links a {
      color: #c9baaa;
      font-size: 14px;
      transition: color var(--ease), padding var(--ease);
    }
    .footer-links a:hover { padding-left: 4px; color: var(--citrus); }
    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding-top: 18px;
      border-top: 1px solid rgba(255,253,249,.14);
      color: #9f9082;
      font-size: 12px;
    }
    .footer-bottom p { margin: 0; }
    .back-top { color: var(--citrus); }
    .back-top:hover { color: var(--white); }
    @media (max-width: 1050px) {
      .container { width: min(var(--content), calc(100% - 48px)); }
      .filter-panel { grid-template-columns: repeat(3, 1fr); }
      .filter-state { min-width: 130px; }
      .movie-layout { grid-template-columns: 1fr; }
      .side-panel { position: static; }
      .ranking-list { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 22px; }
      .progress-wrap { max-width: 390px; }
      .news-list { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 820px) {
      .nav-menu {
        position: absolute;
        top: calc(100% + 1px);
        right: 24px;
        left: 24px;
        display: none;
        align-items: stretch;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 0 0 var(--radius-md) var(--radius-md);
        background: var(--paper);
        box-shadow: var(--shadow);
      }
      .nav-menu.is-open { display: grid; }
      .nav-link, .nav-action { justify-content: flex-start; width: 100%; }
      .nav-action { margin-top: 4px; }
      .menu-toggle { display: inline-flex; }
      .intro-layout, .guide-grid, .faq-layout { grid-template-columns: 1fr; }
      .intro-stats { max-width: 550px; }
      .movie-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .footer-main { grid-template-columns: 1.2fr 1fr 1fr; gap: 25px; }
    }
    @media (max-width: 560px) {
      .container { width: min(var(--content), calc(100% - 36px)); }
      .nav-wrap { min-height: 68px; }
      .brand { font-size: 18px; }
      .brand-mark { width: 36px; height: 36px; }
      .nav-menu { right: 18px; left: 18px; }
      .category-intro { padding: 38px 0 42px; }
      .intro-copy h1 { font-size: 38px; }
      .intro-copy p { font-size: 15px; }
      .intro-stats { gap: 8px; }
      .intro-stat { padding: 14px; }
      .intro-stat strong { font-size: 25px; }
      section { padding: 54px 0; }
      .section-heading { display: block; margin-bottom: 22px; }
      .filter-panel { grid-template-columns: 1fr 1fr; padding: 15px; }
      .filter-group:first-child { grid-column: 1 / -1; }
      .filter-state { width: 100%; }
      .movie-grid { gap: 11px; }
      .movie-info { padding: 12px; }
      .movie-info h3 { min-height: 44px; font-size: 15px; }
      .movie-meta { display: block; }
      .movie-meta > span:last-child { display: block; margin-top: 3px; }
      .ranking-list { grid-template-columns: 1fr; }
      .timeline::before { left: 70px; }
      .timeline-row { grid-template-columns: 56px 28px 1fr; gap: 10px; }
      .timeline-date { font-size: 11px; }
      .news-list { grid-template-columns: 1fr; }
      .news-card { grid-template-columns: 92px 1fr; }
      .guide-card { padding: 20px; }
      .footer-main { grid-template-columns: 1fr 1fr; }
      .footer-about-column { grid-column: 1 / -1; }
      .footer-bottom { display: block; }
      .back-top { display: inline-block; margin-top: 9px; }
    }

/* roulang page: category2 */
:root{
 color-scheme:light;
 --ink:#29231e;--ink-soft:#51483f;--muted:#81766b;--paper:#fff8ec;--paper-deep:#f5ecdc;
 --white:#fffdf9;--line:#e8ddcb;--orange:#e8753c;--citrus:#f4b83f;--plum:#70465a;
 --green:#3d7358;--shadow:0 12px 30px rgba(54,39,24,.08);--shadow-hover:0 18px 36px rgba(54,39,24,.14);
 --radius-sm:8px;--radius-md:14px;--radius-lg:22px;--content:1200px;--ease:220ms ease;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{margin:0;color:var(--ink);background:var(--paper);font-family:"Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;max-width:100%;object-fit:cover}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
.container{width:min(var(--content),calc(100% - 64px));margin-inline:auto}
.site-header{position:sticky;z-index:50;top:0;background:rgba(255,248,236,.97);border-bottom:1px solid rgba(83,66,47,.12);backdrop-filter:blur(12px)}
.nav-wrap{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:inline-flex;align-items:center;gap:11px;font-size:20px;font-weight:850;line-height:1}
.brand-mark{width:39px;height:39px;display:grid;place-items:center;color:var(--ink);background:var(--citrus);border-radius:12px 12px 12px 4px;box-shadow:0 5px 12px rgba(244,184,63,.24)}
.brand-mark::before{content:"";width:0;height:0;margin-left:3px;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:12px solid var(--ink)}
.brand-name{white-space:nowrap}
.nav-menu{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:0;padding:0;list-style:none}
.nav-link{position:relative;display:inline-flex;align-items:center;min-height:42px;padding:8px 12px;color:var(--ink-soft);border-radius:8px;font-size:14px;font-weight:700;transition:color var(--ease),background var(--ease),transform var(--ease)}
.nav-link:hover,.nav-link[aria-current=page]{color:var(--ink);background:#f7e9ca;transform:translateY(-2px)}
.nav-action,.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:11px 18px;border:1px solid transparent;border-radius:9px;font-weight:800;line-height:1.2;transition:transform var(--ease),background var(--ease),border-color var(--ease),box-shadow var(--ease)}
.nav-action,.button-primary{color:var(--ink);background:var(--citrus);box-shadow:0 5px 14px rgba(205,142,35,.16)}
.nav-action:hover,.button-primary:hover{background:#efaa2d;box-shadow:0 8px 18px rgba(205,142,35,.22);transform:translateY(-2px)}
.button-secondary{color:var(--ink);background:transparent;border-color:#d9cbb7}
.button-secondary:hover{background:#f7e9ca;border-color:var(--orange)}
.menu-toggle{display:none;width:44px;height:44px;position:relative;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line);border-radius:9px}
.menu-toggle span,.menu-toggle:before,.menu-toggle:after{content:"";position:absolute;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform var(--ease),opacity var(--ease)}
.menu-toggle:before{transform:translateY(-6px)}.menu-toggle:after{transform:translateY(6px)}
.menu-toggle[aria-expanded=true] span{opacity:0}.menu-toggle[aria-expanded=true]:before{transform:rotate(45deg)}.menu-toggle[aria-expanded=true]:after{transform:rotate(-45deg)}
main{overflow:clip}
.category-head{padding:64px 0 42px;background:#2d2723;color:var(--white)}
.category-head-grid{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:48px}
.eyebrow{display:flex;align-items:center;gap:9px;margin:0 0 14px;color:var(--citrus);font-size:13px;font-weight:850}
.eyebrow:before{content:"";width:22px;height:3px;background:var(--orange);border-radius:3px}
.category-head h1{max-width:650px;margin:0 0 15px;font-size:clamp(38px,5vw,64px);line-height:1.12;letter-spacing:-1px}
.category-head h1 em{color:var(--citrus);font-style:normal}
.category-lead{max-width:640px;margin:0;color:#e8dcd0;font-size:17px}
.header-visual{min-height:270px;position:relative;overflow:hidden;border-radius:18px;background:#4a3931 url("/assets/images/e43ac87ab994fb67.jpg") center/cover;box-shadow:var(--shadow)}
.header-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(36,30,26,.15),rgba(36,30,26,.78))}
.visual-ticket{position:absolute;z-index:1;right:24px;bottom:22px;width:210px;padding:18px;background:rgba(255,248,236,.94);color:var(--ink);border-left:4px solid var(--citrus);border-radius:10px;box-shadow:var(--shadow)}
.visual-ticket strong{display:block;font-size:28px;line-height:1.1}.visual-ticket span{display:block;margin-top:6px;color:var(--muted);font-size:13px}
.section{padding:72px 0}.section-alt{background:var(--paper-deep)}.section-dark{background:#29231e;color:var(--white)}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:28px}
.section-heading h2{margin:0;font-size:clamp(25px,3vw,36px);line-height:1.25}
.section-heading p{max-width:520px;margin:0;color:var(--muted);font-size:14px}.section-dark p{color:#cdbfb1}
.filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:18px;background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.filter-label{margin-right:4px;color:var(--muted);font-size:14px;font-weight:800}
.filter-chip{padding:8px 13px;border:1px solid var(--line);border-radius:30px;background:var(--paper);color:var(--ink-soft);font-size:13px;transition:all var(--ease)}
.filter-chip:hover,.filter-chip.active{color:var(--ink);background:#f8d987;border-color:var(--citrus);transform:translateY(-1px)}
.series-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.series-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.series-card{display:grid;grid-template-columns:145px 1fr;min-height:174px;overflow:hidden;background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease)}
.series-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:#e7b65b}
.series-thumb{position:relative;min-height:174px;background:#d8c4aa}
.series-thumb img{height:100%;aspect-ratio:4/5}
.badge{position:absolute;left:10px;top:10px;display:inline-flex;padding:4px 8px;border-radius:5px;color:var(--ink);background:var(--citrus);font-size:11px;font-weight:850}
.badge.orange{color:#fff;background:var(--orange)}.badge.purple{color:#fff;background:var(--plum)}.badge.gray{color:var(--ink-soft);background:#e3ddd4}
.series-info{padding:16px 15px;display:flex;flex-direction:column;justify-content:center}
.series-info h3{margin:0 0 8px;font-size:18px;line-height:1.35}
.series-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px;color:var(--muted);font-size:12px}
.tag{display:inline-flex;padding:3px 7px;border-radius:4px;background:#f5ead8;color:var(--plum);font-size:11px;font-weight:750}
.rating{color:#b66f18;font-weight:850}
.series-info p{margin:0;color:var(--muted);font-size:13px;line-height:1.65}
.more-row{margin-top:20px;text-align:center}.more-link{display:inline-flex;padding:10px 20px;border-bottom:2px solid var(--orange);font-weight:800}
.more-link:hover{color:var(--orange)}
.side-panel{padding:23px;background:#332b26;color:var(--white);border-radius:14px;box-shadow:var(--shadow)}
.side-panel h3{margin:0 0 16px;color:var(--citrus);font-size:20px}
.stat-line{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:14px}
.stat-line:last-child{border-bottom:0}.stat-line strong{color:#fff;font-size:18px}
.progress-list{display:grid;gap:17px}
.progress-item{display:grid;grid-template-columns:112px 1fr 72px;gap:16px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line)}
.progress-item:last-child{border-bottom:0}
.progress-title{font-weight:800}.progress-date{display:block;color:var(--muted);font-size:12px}
.progress-track{height:8px;overflow:hidden;background:#eadfce;border-radius:10px}.progress-fill{height:100%;background:var(--orange);border-radius:inherit}
.progress-state{color:var(--orange);font-size:13px;font-weight:800;text-align:right}
.rank-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:26px}
.rank-list{margin:0;padding:0;list-style:none}
.rank-item{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.rank-item:first-child,.rank-item:nth-child(2),.rank-item:nth-child(3){background:rgba(244,184,63,.08);border-left:3px solid var(--citrus);padding-left:12px}
.rank-no{color:var(--citrus);font-size:24px;font-weight:900}.rank-name{font-weight:800}.rank-type{display:block;color:#cdbfb1;font-size:12px}.rank-score{color:var(--citrus);font-weight:850}
.rank-note{padding:28px;background:url("/assets/images/25fdd5886775da30.jpg") center/cover;border-radius:15px;min-height:270px;display:flex;align-items:end;position:relative;overflow:hidden}
.rank-note:before{content:"";position:absolute;inset:0;background:linear-gradient(transparent,rgba(36,30,26,.9))}
.rank-note-content{position:relative;z-index:1}.rank-note h3{margin:0 0 7px;font-size:25px}.rank-note p{margin:0;color:#e4d8ca;font-size:14px}
.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.guide-card{padding:22px;background:var(--white);border:1px solid var(--line);border-radius:14px}
.guide-card b{display:block;margin-bottom:8px;color:var(--plum);font-size:18px}.guide-card p{margin:0;color:var(--muted);font-size:14px}
.news-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.news-card{overflow:hidden;background:var(--white);border:1px solid var(--line);border-radius:14px;transition:transform var(--ease),box-shadow var(--ease)}
.news-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.news-card img{height:142px;aspect-ratio:16/9}.news-body{padding:16px}.news-body h3{margin:7px 0 5px;font-size:17px;line-height:1.45}.news-body time{color:var(--muted);font-size:12px}.news-body p{margin:7px 0 0;color:var(--muted);font-size:13px}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.faq-item{background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.faq-item summary{padding:17px 20px;cursor:pointer;font-weight:800;list-style:none}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:"+";float:right;color:var(--orange);font-size:22px;line-height:1}.faq-item[open] summary:after{content:"−"}.faq-answer{padding:0 20px 18px;color:var(--muted);font-size:14px}
.suggestion{padding:36px;background:linear-gradient(120deg,#f4b83f,#e8753c);border-radius:18px;display:flex;justify-content:space-between;align-items:center;gap:28px}
.suggestion h2{margin:0 0 7px;font-size:29px}.suggestion p{margin:0;color:#5b321f}.suggestion .button{background:#29231e;color:var(--white)}.suggestion .button:hover{background:#4b3930}
.site-footer{padding-top:54px;background:#29231e;color:#fff8ec}.footer-main{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:42px;padding-bottom:42px}.footer-brand{display:inline-flex;align-items:center;gap:11px;font-size:20px;font-weight:850}.footer-about{max-width:350px;margin:17px 0 0;color:#cdbfb1;font-size:14px}.footer-column h2{margin:0 0 13px;color:var(--citrus);font-size:15px}.footer-links{display:grid;gap:8px;margin:0;padding:0;list-style:none;color:#d9cabc;font-size:14px}.footer-links a:hover{color:var(--citrus)}.footer-bottom{display:flex;justify-content:space-between;gap:20px;padding:18px 0;border-top:1px solid rgba(255,255,255,.15);color:#b9aa9b;font-size:13px}.footer-bottom p{margin:0}.back-top:hover{color:var(--citrus)}
:focus-visible{outline:3px solid rgba(232,117,60,.55);outline-offset:3px}
@media(max-width:960px){.container{width:min(var(--content),calc(100% - 48px))}.category-head-grid,.rank-wrap{grid-template-columns:1fr}.header-visual{min-height:220px}.series-layout{grid-template-columns:1fr}.side-panel{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.side-panel h3{grid-column:1/-1;margin-bottom:0}.stat-line{display:block;border:0;padding:0}.stat-line strong{display:block}.news-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.container{width:calc(100% - 36px)}.nav-wrap{min-height:68px}.menu-toggle{display:flex}.nav-menu{display:none;position:absolute;top:68px;left:0;right:0;padding:14px 18px 20px;flex-direction:column;align-items:stretch;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:var(--shadow)}.nav-menu.open{display:flex}.nav-link,.nav-action{justify-content:center;width:100%}.category-head{padding:44px 0 32px}.category-head h1{font-size:40px}.section{padding:52px 0}.section-heading{display:block}.section-heading p{margin-top:9px}.series-list{grid-template-columns:1fr}.series-card{grid-template-columns:122px 1fr}.series-thumb{min-height:156px}.side-panel{grid-template-columns:1fr 1fr}.progress-item{grid-template-columns:1fr 85px;gap:9px}.progress-track{grid-column:1/-1;grid-row:2}.progress-state{grid-column:2;grid-row:1}.guide-grid,.faq-grid{grid-template-columns:1fr}.news-list{grid-template-columns:1fr}.suggestion{display:block;padding:27px}.suggestion .button{margin-top:18px;width:100%}.footer-main{grid-template-columns:1fr 1fr;gap:28px}.footer-about-column{grid-column:1/-1}.footer-bottom{display:block}.back-top{display:inline-block;margin-top:8px}}
@media(max-width:430px){.filter-bar{align-items:stretch}.filter-label{width:100%}.filter-chip{flex:1;text-align:center}.side-panel{display:block}.stat-line{display:flex;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.14)}.series-card{grid-template-columns:105px 1fr}.series-info{padding:12px}.series-info h3{font-size:16px}.footer-main{grid-template-columns:1fr}}