/* roulang page: index */
:root {
      --blue: #2563eb;
      --blue-dark: #194fc4;
      --blue-soft: #eaf2ff;
      --coral: #ee8b68;
      --coral-soft: #fff0e9;
      --ink: #172033;
      --muted: #64748b;
      --line: #dce6f2;
      --paper: #fff;
      --wash: #f7faff;
      --wash-blue: #eff5ff;
      --radius: 16px;
      --shadow: 0 12px 32px rgba(30, 64, 175, .08);
      --max: 1200px;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 92px; }
    body {
      margin: 0;
      padding-bottom: 82px;
      color: var(--ink);
      background: var(--wash);
      font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
      font-size: 15px;
      line-height: 1.75;
      -webkit-font-smoothing: antialiased;
    }
    img { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; }
    a, button { -webkit-tap-highlight-color: transparent; }
    a:focus-visible, button:focus-visible, summary:focus-visible {
      outline: 3px solid rgba(37, 99, 235, .35);
      outline-offset: 3px;
    }
    .container { width: min(var(--max), calc(100% - 48px)); margin-inline: auto; }
    .site-header {
      position: sticky; top: 0; z-index: 50;
      background: rgba(255,255,255,.96);
      border-bottom: 1px solid var(--line);
      box-shadow: 0 4px 16px rgba(30,64,175,.035);
    }
    .nav-wrap { min-height: 74px; display: flex; align-items: center; gap: 26px; }
    .brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; font-weight: 750; font-size: 18px; }
    .brand-mark {
      width: 38px; height: 38px; display: grid; place-items: center;
      color: #fff; background: var(--blue); border-radius: 11px;
      box-shadow: 0 6px 14px rgba(37,99,235,.2);
    }
    .brand-mark svg { width: 17px; height: 17px; }
    .nav-links { display: flex; align-items: center; gap: 21px; margin-left: auto; }
    .nav-links a { color: #475569; font-size: 13px; white-space: nowrap; transition: color .2s; }
    .nav-links a:hover, .nav-links a.active { color: var(--blue); }
    .nav-actions { display: flex; gap: 10px; align-items: center; }
    .button {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      min-height: 44px; padding: 0 18px; border: 1px solid transparent;
      border-radius: 10px; font-weight: 650; font-size: 14px;
      transition: transform .2s, box-shadow .2s, background .2s, border-color .2s;
      cursor: pointer;
    }
    .button:hover { transform: translateY(-1px); }
    .button-primary { color: #fff; background: var(--blue); box-shadow: 0 7px 16px rgba(37,99,235,.18); }
    .button-primary:hover { background: var(--blue-dark); box-shadow: 0 9px 20px rgba(37,99,235,.23); }
    .button-secondary { color: var(--blue); border-color: #cbdcf8; background: #fff; }
    .button-secondary:hover { background: var(--blue-soft); border-color: #a9c4f5; }
    .menu-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 10px; cursor: pointer; }
    .menu-toggle svg { width: 20px; height: 20px; }
    main { overflow: clip; }
    section { padding: 76px 0; }
    .section-tint { background: var(--wash-blue); }
    .section-white { background: #fff; }
    .section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
    .section-head > div { max-width: 720px; }
    .eyebrow { color: var(--blue); font-weight: 700; font-size: 12px; margin: 0 0 7px; }
    h1, h2, h3, p { margin-top: 0; }
    h1 { margin-bottom: 12px; font-size: clamp(34px, 4vw, 50px); line-height: 1.16; letter-spacing: 0; }
    h2 { margin-bottom: 8px; font-size: clamp(23px, 2.5vw, 30px); line-height: 1.35; letter-spacing: 0; }
    h3 { margin-bottom: 6px; font-size: 16px; line-height: 1.5; }
    .section-head p, .lead { color: var(--muted); margin-bottom: 0; }
    .hero { padding: 42px 0 56px; background: linear-gradient(180deg, #edf4ff 0%, #f7faff 100%); }
    .hero-panel {
      position: relative; overflow: hidden; min-height: 450px; padding: 58px;
      display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 44px;
      border: 1px solid #d7e5fa; border-radius: 22px; background: #fff;
      box-shadow: var(--shadow);
    }
    .hero-copy { position: relative; z-index: 2; max-width: 570px; }
    .hero h1 span { color: var(--blue); }
    .hero-subtitle { color: #34445d; font-weight: 650; font-size: 18px; margin-bottom: 12px; }
    .hero-description { max-width: 560px; color: var(--muted); margin-bottom: 23px; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 11px; }
    .hero-meta { display: flex; gap: 17px; flex-wrap: wrap; margin-top: 22px; color: var(--muted); font-size: 12px; }
    .hero-meta span::before { content: "✓"; color: var(--blue); font-weight: 800; margin-right: 7px; }
    .hero-art { position: relative; min-height: 320px; }
    .hero-image {
      position: absolute; inset: 0 0 15px 32px; width: calc(100% - 32px); height: calc(100% - 15px);
      object-fit: cover; border-radius: 18px;
    }
    .hero-art::after { content: ""; position: absolute; inset: 35% 0 15px 32px; border-radius: 0 0 18px 18px; background: linear-gradient(transparent, rgba(9,23,48,.68)); pointer-events: none; }
    .hero-caption { position: absolute; z-index: 1; left: 54px; bottom: 39px; color: #fff; }
    .hero-caption strong { display: block; font-size: 19px; }
    .hero-caption span { color: rgba(255,255,255,.82); font-size: 12px; }
    .floating-note {
      position: absolute; z-index: 2; top: 20px; left: 0; padding: 12px 15px;
      background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
      font-size: 12px; color: var(--muted);
    }
    .floating-note b { display: block; color: var(--ink); font-size: 15px; }
    .triple { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .triple-item { display: grid; grid-template-columns: 42px 1fr; gap: 14px; padding: 25px 26px; border-right: 1px solid var(--line); }
    .triple-item:last-child { border-right: 0; }
    .number-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: var(--blue); background: var(--blue-soft); font-weight: 800; }
    .triple-item:nth-child(2) .number-icon { color: #bb5c39; background: var(--coral-soft); }
    .triple-item p { margin: 0; font-size: 13px; color: var(--muted); }
    .scene-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 42px; }
    .scene-copy p { color: var(--muted); }
    .scene-steps { display: flex; gap: 10px; margin-top: 22px; }
    .scene-step { flex: 1; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
    .scene-step b { display: block; color: var(--blue); font-size: 12px; }
    .scene-step span { font-size: 13px; font-weight: 650; }
    .scene-image-wrap { position: relative; }
    .scene-image { width: 100%; height: 300px; border-radius: 16px; object-fit: cover; box-shadow: var(--shadow); }
    .scene-chip { position: absolute; bottom: 15px; left: 15px; padding: 7px 11px; border-radius: 8px; color: var(--ink); background: rgba(255,255,255,.95); font-size: 12px; }
    .stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
    .stat { padding: 23px; text-align: center; border-right: 1px solid var(--line); }
    .stat:last-child { border: 0; }
    .stat b { display: block; color: var(--blue); font-size: 25px; line-height: 1.3; }
    .stat span { color: var(--muted); font-size: 12px; }
    .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
    .compare-panel { padding: 24px 26px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
    .compare-panel.highlight { border-color: #aac5f7; background: #f5f9ff; }
    .compare-panel h3 { display: flex; align-items: center; gap: 9px; }
    .compare-panel h3 span { color: var(--blue); }
    .compare-panel ul { padding: 0; margin: 12px 0 0; list-style: none; }
    .compare-panel li { padding: 8px 0; border-top: 1px solid #edf1f6; color: var(--muted); font-size: 13px; }
    .compare-panel li::before { content: "•"; color: var(--blue); margin-right: 9px; font-size: 18px; vertical-align: -1px; }
    .latest-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 18px; }
    .movie-card { min-width: 0; }
    .poster { position: relative; overflow: hidden; aspect-ratio: 3 / 2; border-radius: 13px; background: #e6edf7; }
    .poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
    .movie-card:hover .poster img, .hot-card:hover img { transform: scale(1.035); }
    .badge {
      display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px;
      color: #1d4ed8; background: #e8f0ff; font-size: 11px; line-height: 1.6; font-weight: 700;
    }
    .poster .badge { position: absolute; left: 10px; top: 10px; }
    .badge-coral { color: #ad5434; background: #fff0e9; }
    .movie-info { padding: 10px 2px 0; }
    .movie-title { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
    .movie-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; }
    .rating { color: #bb6c3d; font-weight: 750; }
    .hot-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 24px; }
    .hot-feature { position: relative; min-height: 390px; overflow: hidden; border-radius: 17px; background: #dfe8f5; }
    .hot-feature img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; transition: transform .35s; }
    .hot-feature::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(12,25,49,.78)); }
    .hot-feature-copy { position: absolute; z-index: 1; left: 25px; right: 25px; bottom: 23px; color: #fff; }
    .hot-feature-copy h3 { font-size: 21px; }
    .hot-feature-copy p { margin: 0; color: rgba(255,255,255,.82); font-size: 13px; }
    .hot-small-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
    .hot-card { min-width: 0; }
    .hot-card .poster { aspect-ratio: 16 / 10; }
    .hot-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
    .hot-card h3 { margin: 7px 0 2px; font-size: 14px; }
    .hot-card p { margin: 0; color: var(--muted); font-size: 12px; }
    .channel-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
    .channel {
      min-height: 160px; display: flex; flex-direction: column; justify-content: space-between;
      padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff;
      transition: transform .2s, box-shadow .2s, border-color .2s;
    }
    .channel:hover { transform: translateY(-3px); border-color: #b7cdf4; box-shadow: var(--shadow); }
    .channel-no { color: var(--coral); font-size: 12px; font-weight: 800; }
    .channel h3 { margin: 9px 0 5px; }
    .channel p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
    .rank-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 30px; }
    .rank-feature { padding: 26px; border-radius: 17px; color: #fff; background: var(--blue); }
    .rank-feature .eyebrow { color: #d7e5ff; }
    .rank-feature h3 { font-size: 21px; margin: 12px 0; }
    .rank-feature p { color: #e2ebff; font-size: 13px; }
    .rank-feature strong { font-size: 36px; display: block; margin-top: 28px; }
    .rank-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
    .rank-row { min-width: 0; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; padding: 11px 0; border-bottom: 1px solid var(--line); }
    .rank-num { color: #8190a7; font-weight: 800; font-size: 14px; }
    .rank-row:nth-child(-n+3) .rank-num { color: var(--coral); font-size: 18px; }
    .rank-title { min-width: 0; }
    .rank-title b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
    .rank-title span { color: var(--muted); font-size: 11px; }
    .rank-score { text-align: right; color: #b76a3d; font-size: 12px; font-weight: 700; }
    .news-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 30px; }
    .news-lead { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
    .news-lead img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
    .news-lead-copy { padding: 17px 19px; }
    .news-lead-copy time, .news-item time { color: var(--muted); font-size: 11px; }
    .news-lead-copy h3 { margin: 6px 0; font-size: 17px; }
    .news-lead-copy p { margin: 0; color: var(--muted); font-size: 13px; }
    .news-list { display: grid; }
    .news-item { display: grid; grid-template-columns: 98px 1fr; gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
    .news-item img { width: 98px; height: 67px; border-radius: 9px; object-fit: cover; }
    .news-item h3 { margin: 3px 0 0; font-size: 14px; }
    .topic-band { display: grid; grid-template-columns: 1.15fr .85fr; overflow: hidden; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
    .topic-copy { padding: 35px; }
    .topic-copy p { max-width: 520px; color: var(--muted); }
    .topic-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
    .topic-tags span { padding: 7px 11px; border-radius: 8px; color: #365789; background: var(--blue-soft); font-size: 12px; }
    .topic-image { width: 100%; height: 100%; min-height: 280px; object-fit: cover; }
    .quote-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
    .quote { padding: 20px; border-left: 3px solid var(--coral); background: #fff; border-radius: 0 12px 12px 0; }
    .quote p { margin: 0 0 9px; color: #475569; font-size: 13px; }
    .quote b { color: var(--muted); font-size: 11px; }
    .faq-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 40px; }
    .faq-intro p { color: var(--muted); }
    .faq-list details { border-bottom: 1px solid var(--line); }
    .faq-list summary { position: relative; padding: 16px 32px 16px 0; cursor: pointer; list-style: none; font-weight: 700; }
    .faq-list summary::-webkit-details-marker { display: none; }
    .faq-list summary::after { content: "+"; position: absolute; right: 3px; top: 12px; color: var(--blue); font-size: 22px; font-weight: 400; }
    .faq-list details[open] summary::after { content: "−"; }
    .faq-list details p { max-width: 700px; padding: 0 25px 15px 0; margin: 0; color: var(--muted); font-size: 13px; }
    .info-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; border: 1px solid #d6e5fb; border-radius: 12px; background: #f2f7ff; }
    .info-bar strong { display: block; font-size: 14px; }
    .info-bar p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
    .mini-checks { display: flex; flex-wrap: wrap; gap: 10px 18px; color: #42618e; font-size: 12px; }
    .mini-checks span::before { content: "✓"; margin-right: 6px; color: var(--blue); }
    .updates { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
    .update { padding: 19px; background: #fff; border: 1px solid var(--line); border-radius: 13px; }
    .update time { color: var(--blue); font-size: 11px; font-weight: 700; }
    .update h3 { margin: 6px 0; }
    .update p { margin: 0; color: var(--muted); font-size: 12px; }
    .closing { padding: 46px 0; background: #eaf2ff; }
    .closing-inner { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
    .closing-inner p { margin: 5px 0 0; color: var(--muted); }
    .fixed-cta {
      position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
      border-top: 1px solid var(--line); background: rgba(255,255,255,.97); box-shadow: 0 -5px 20px rgba(30,64,175,.06);
    }
    .fixed-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
    .fixed-inner strong { font-size: 14px; }
    .fixed-inner span { color: var(--muted); font-size: 12px; margin-left: 10px; }
    .site-footer { padding: 48px 0 20px; background: #fff; border-top: 1px solid var(--line); }
    .footer-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 30px; padding-bottom: 30px; }
    .footer-brand p { max-width: 280px; margin: 14px 0 0; color: var(--muted); font-size: 12px; }
    .footer-col h3 { margin-bottom: 11px; font-size: 13px; }
    .footer-col a { display: block; width: fit-content; margin: 7px 0; color: var(--muted); font-size: 12px; transition: color .2s; }
    .footer-col a:hover { color: var(--blue); }
    .copyright { padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
    .mobile-nav { display: none; }
    @media (max-width: 1020px) {
      .nav-wrap { gap: 15px; }
      .nav-links { gap: 13px; }
      .nav-links a { font-size: 12px; }
      .nav-actions .button { padding-inline: 13px; }
      .hero-panel { padding: 42px; gap: 25px; }
      .channel-list { grid-template-columns: repeat(3,1fr); }
      .latest-grid { grid-template-columns: repeat(3,1fr); }
    }
    @media (max-width: 767px) {
      body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
      .container { width: min(100% - 32px, var(--max)); }
      .nav-wrap { min-height: 64px; }
      .nav-links, .nav-actions .button-secondary { display: none; }
      .nav-actions { margin-left: auto; }
      .nav-actions .button-primary { min-height: 39px; padding-inline: 12px; font-size: 12px; }
      .menu-toggle { display: grid; place-items: center; }
      .mobile-nav {
        position: absolute; display: none; top: 64px; left: 0; right: 0; padding: 9px 16px 16px;
        border-bottom: 1px solid var(--line); background: #fff; box-shadow: 0 10px 18px rgba(30,64,175,.08);
      }
      .mobile-nav.open { display: grid; }
      .mobile-nav a { padding: 11px 7px; border-bottom: 1px solid #edf1f6; color: #475569; font-size: 14px; }
      section { padding: 52px 0; }
      .section-head { display: block; margin-bottom: 22px; }
      .section-head .text-link { display: inline-block; margin-top: 10px; }
      .hero { padding: 20px 0 36px; }
      .hero-panel { min-height: auto; padding: 29px 23px 22px; grid-template-columns: 1fr; gap: 20px; border-radius: 17px; }
      h1 { font-size: 36px; }
      .hero-subtitle { font-size: 16px; }
      .hero-art { min-height: 230px; }
      .hero-image { inset: 0 0 0 15px; width: calc(100% - 15px); height: 100%; }
      .hero-art::after { inset: 35% 0 0 15px; }
      .hero-caption { left: 32px; bottom: 18px; }
      .floating-note { top: 12px; padding: 8px 11px; }
      .triple { grid-template-columns: 1fr; }
      .triple-item { border-right: 0; border-bottom: 1px solid var(--line); padding: 19px 8px; }
      .triple-item:last-child { border-bottom: 0; }
      .scene-grid, .rank-layout, .news-layout, .faq-grid { grid-template-columns: 1fr; gap: 22px; }
      .scene-image { height: 230px; }
      .stats { grid-template-columns: 1fr 1fr; }
      .stat:nth-child(2) { border-right: 0; }
      .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
      .compare { gap: 12px; }
      .compare-panel { padding: 18px; }
      .latest-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 12px; }
      .hot-layout { grid-template-columns: 1fr; }
      .hot-feature { min-height: 270px; }
      .channel-list { grid-template-columns: repeat(2,1fr); }
      .channel { min-height: 145px; padding: 15px; }
      .rank-list { gap: 0 12px; }
      .topic-band { grid-template-columns: 1fr; }
      .topic-copy { padding: 25px; }
      .topic-image { min-height: 200px; max-height: 230px; }
      .quote-strip { grid-template-columns: 1fr; }
      .updates { grid-template-columns: 1fr; }
      .info-bar { align-items: flex-start; flex-direction: column; }
      .closing-inner { align-items: flex-start; flex-direction: column; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px 18px; }
      .fixed-inner { justify-content: center; }
      .fixed-inner > div { display: none; }
      .fixed-inner .button { width: 100%; min-height: 44px; }
      .site-footer { padding-bottom: 18px; }
    }
    @media (max-width: 520px) {
      .container { width: calc(100% - 28px); }
      .brand { font-size: 16px; }
      .brand-mark { width: 34px; height: 34px; }
      .nav-actions .button-primary { display: none; }
      .hero-actions .button { flex: 1; padding-inline: 10px; font-size: 13px; }
      .hero-meta { gap: 8px 13px; }
      .scene-steps { gap: 6px; }
      .scene-step { padding: 10px 8px; }
      .scene-step span { font-size: 11px; }
      .compare { grid-template-columns: 1fr; }
      .hot-small-grid { gap: 13px 10px; }
      .rank-list { grid-template-columns: 1fr; }
      .news-item { grid-template-columns: 83px 1fr; gap: 11px; }
      .news-item img { width: 83px; height: 60px; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .footer-brand { grid-column: 1 / -1; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
    }

/* roulang page: category1 */
:root{
      --blue:#2563eb;
      --blue-dark:#194fc4;
      --blue-soft:#eaf2ff;
      --coral:#ee8b68;
      --coral-soft:#fff0e9;
      --ink:#172033;
      --muted:#64748b;
      --line:#dce6f2;
      --paper:#fff;
      --wash:#f7faff;
      --wash-blue:#eff5ff;
      --radius:16px;
      --shadow:0 12px 32px rgba(30,64,175,.08);
      --max:1200px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth;scroll-padding-top:90px}
    body{
      margin:0;
      padding-bottom:78px;
      color:var(--ink);
      background:var(--wash);
      font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
      font-size:15px;
      line-height:1.75;
      -webkit-font-smoothing:antialiased;
    }
    a{color:inherit;text-decoration:none}
    img{display:block;max-width:100%}
    button,input{font:inherit}
    a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{
      outline:3px solid rgba(37,99,235,.3);
      outline-offset:3px;
    }
    .container{width:min(var(--max),calc(100% - 48px));margin-inline:auto}
    .site-header{
      position:sticky;
      top:0;
      z-index:50;
      background:rgba(255,255,255,.97);
      border-bottom:1px solid var(--line);
      box-shadow:0 4px 16px rgba(30,64,175,.04);
    }
    .nav-wrap{min-height:74px;display:flex;align-items:center;gap:26px}
    .brand{display:inline-flex;align-items:center;gap:11px;flex:0 0 auto;font-weight:750;font-size:18px}
    .brand-mark{
      width:38px;height:38px;display:grid;place-items:center;color:#fff;
      background:var(--blue);border-radius:11px;
      box-shadow:0 6px 14px rgba(37,99,235,.2)
    }
    .brand-mark svg{width:17px;height:17px}
    .nav-links{display:flex;align-items:center;gap:21px;margin-left:auto}
    .nav-links a{position:relative;color:#475569;font-size:13px;white-space:nowrap;transition:color .2s}
    .nav-links a:hover,.nav-links a.active{color:var(--blue)}
    .nav-links a.active:after{
      content:"";position:absolute;left:0;right:0;bottom:-9px;height:2px;
      background:var(--blue);border-radius:4px
    }
    .nav-actions{display:flex;gap:10px;align-items:center}
    .button{
      display:inline-flex;align-items:center;justify-content:center;gap:8px;
      min-height:44px;padding:0 18px;border:1px solid transparent;border-radius:10px;
      font-weight:650;font-size:14px;cursor:pointer;
      transition:transform .2s,box-shadow .2s,background .2s,border-color .2s
    }
    .button:hover{transform:translateY(-1px)}
    .button-primary{color:#fff;background:var(--blue);box-shadow:0 7px 16px rgba(37,99,235,.18)}
    .button-primary:hover{background:var(--blue-dark);box-shadow:0 9px 20px rgba(37,99,235,.23)}
    .button-secondary{color:var(--blue);border-color:#cbdcf8;background:#fff}
    .button-secondary:hover{background:var(--blue-soft);border-color:#a9c4f5}
    .menu-toggle{display:none;width:42px;height:42px;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:10px;cursor:pointer}
    .menu-toggle svg{width:20px;height:20px}
    main{overflow:clip}
    section{padding:76px 0}
    .section-white{background:#fff}
    .section-tint{background:var(--wash-blue)}
    .section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:30px}
    .section-head>div{max-width:740px}
    .eyebrow{color:var(--blue);font-weight:700;font-size:12px;margin:0 0 7px}
    h1,h2,h3,p{margin-top:0}
    h1{font-size:clamp(32px,4vw,52px);line-height:1.2;letter-spacing:0;margin-bottom:16px}
    h2{font-size:clamp(24px,3vw,32px);line-height:1.3;letter-spacing:0;margin-bottom:10px}
    h3{font-size:17px;line-height:1.45;margin-bottom:7px}
    .lead,.section-head p{color:var(--muted);margin-bottom:0}
    .category-hero{padding:68px 0 54px;background:linear-gradient(180deg,#edf4ff 0%,#f7faff 100%)}
    .hero-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
    .hero-copy{max-width:650px}
    .hero-copy h1 span{color:var(--blue)}
    .hero-copy .lead{font-size:16px;max-width:620px}
    .hero-tags{display:flex;flex-wrap:wrap;gap:9px;margin:24px 0 0}
    .tag{display:inline-flex;align-items:center;min-height:30px;padding:3px 11px;border:1px solid #cbdcf8;border-radius:999px;color:#315cae;background:#fff;font-size:12px;font-weight:650}
    .tag.coral{color:#ad5434;background:var(--coral-soft);border-color:#f8cdbb}
    .category-visual{
      min-height:330px;padding:20px;position:relative;overflow:hidden;
      border:1px solid #d7e5fa;border-radius:22px;background:#fff;box-shadow:var(--shadow)
    }
    .visual-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;color:var(--muted);font-size:12px}
    .visual-top strong{color:var(--ink);font-size:15px}
    .visual-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:12px;height:250px}
    .visual-poster,.mini-poster,.poster{
      position:relative;overflow:hidden;border-radius:12px;
      background:linear-gradient(145deg,#9fc3f6,#3f65bb 58%,#182b61)
    }
    .visual-poster:after,.mini-poster:after,.poster:after{
      content:"";position:absolute;inset:0;background:linear-gradient(transparent 42%,rgba(13,26,58,.78))
    }
    .visual-poster{background:linear-gradient(145deg,#f5b18f,#bd5870 48%,#273b78)}
    .visual-poster .visual-label,.mini-poster .visual-label{
      position:absolute;z-index:1;left:13px;right:13px;bottom:12px;color:#fff
    }
    .visual-label strong{display:block;font-size:16px}
    .visual-label span{font-size:11px;color:rgba(255,255,255,.8)}
    .mini-stack{display:grid;grid-template-rows:1fr 1fr;gap:12px}
    .mini-poster:first-child{background:linear-gradient(145deg,#95d1cf,#286c8c)}
    .mini-poster:last-child{background:linear-gradient(145deg,#f5d291,#c46d4d)}
    .filter-bar{
      display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:18px 20px;
      border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 8px 24px rgba(30,64,175,.05)
    }
    .filter-label{font-size:13px;font-weight:700;color:var(--ink);margin-right:3px}
    .filter-chip{border:1px solid var(--line);background:#fff;color:var(--muted);padding:7px 13px;border-radius:8px;cursor:pointer;font-size:13px;transition:.2s}
    .filter-chip:hover,.filter-chip.active{color:var(--blue);border-color:#a8c6f6;background:var(--blue-soft)}
    .content-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:28px;align-items:start}
    .result-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px}
    .result-head h2{font-size:23px;margin:0}
    .result-count{color:var(--muted);font-size:13px}
    .movie-list{display:grid;gap:14px}
    .movie-row{
      display:grid;grid-template-columns:128px minmax(0,1fr) auto;gap:19px;align-items:center;
      padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff;
      transition:transform .2s,box-shadow .2s,border-color .2s
    }
    .movie-row:hover{transform:translateY(-2px);border-color:#bad0f3;box-shadow:var(--shadow)}
    .movie-row .poster{height:145px}
    .poster.one{background:linear-gradient(145deg,#f3b68d,#a64c68 55%,#273b78)}
    .poster.two{background:linear-gradient(145deg,#a8d5d0,#36718e 53%,#1e385e)}
    .poster.three{background:linear-gradient(145deg,#e7d08b,#bb774e 53%,#473354)}
    .poster.four{background:linear-gradient(145deg,#b9b4ed,#5e5da8 53%,#27315c)}
    .poster.five{background:linear-gradient(145deg,#efc4c6,#a95f7c 53%,#3d365f)}
    .poster.six{background:linear-gradient(145deg,#afd8f0,#4779ae 53%,#25365d)}
    .poster-copy h3{margin-bottom:6px}
    .poster-copy p{color:var(--muted);font-size:13px;margin:0 0 10px;line-height:1.65}
    .meta-line{display:flex;flex-wrap:wrap;gap:8px;color:var(--muted);font-size:12px}
    .score{min-width:66px;text-align:center;color:#b45c37;font-weight:750;font-size:18px}
    .score small{display:block;color:var(--muted);font-size:11px;font-weight:400}
    .side-panel{padding:22px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow)}
    .side-panel h3{margin-bottom:17px}
    .side-note{padding:13px 0;border-bottom:1px solid var(--line)}
    .side-note:last-child{border-bottom:0;padding-bottom:0}
    .side-note strong{display:block;font-size:14px}
    .side-note span{color:var(--muted);font-size:12px}
    .group-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .group-card{padding:23px;border:1px solid var(--line);background:#fff;border-radius:15px;box-shadow:0 8px 24px rgba(30,64,175,.05)}
    .group-number{display:block;color:var(--blue);font-size:12px;font-weight:750;margin-bottom:18px}
    .group-card p{color:var(--muted);font-size:13px;margin:0}
    .rank-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}
    .rank-item{padding:23px 20px;border-right:1px solid var(--line)}
    .rank-item:last-child{border-right:0}
    .rank-num{color:var(--coral);font-size:24px;font-weight:800;margin-bottom:7px}
    .rank-item strong{display:block;font-size:15px}
    .rank-item span{display:block;color:var(--muted);font-size:12px;margin-top:4px}
    .news-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:28px}
    .news-feature{padding:25px;border-radius:16px;background:#1d4fc4;color:#fff;min-height:220px;display:flex;flex-direction:column;justify-content:end}
    .news-feature .eyebrow{color:#cfe0ff}
    .news-feature p{color:#dce8ff;font-size:13px}
    .news-list{border-top:1px solid var(--line)}
    .news-item{display:flex;justify-content:space-between;gap:20px;padding:17px 0;border-bottom:1px solid var(--line)}
    .news-item strong{font-size:14px}
    .news-item span{flex:0 0 auto;color:var(--muted);font-size:12px}
    .faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:42px}
    .faq-intro p{color:var(--muted)}
    details{border-bottom:1px solid var(--line);padding:16px 0}
    summary{cursor:pointer;font-weight:700;list-style:none;padding-right:25px;position:relative}
    summary::-webkit-details-marker{display:none}
    summary:after{content:"+";position:absolute;right:2px;color:var(--blue);font-size:21px;top:-4px}
    details[open] summary:after{content:"−"}
    details p{color:var(--muted);font-size:13px;margin:10px 0 0}
    .notice-bar{padding:19px 22px;border:1px solid #cbdcf8;border-radius:14px;background:var(--blue-soft);display:flex;align-items:center;justify-content:space-between;gap:20px}
    .notice-bar strong{display:block}
    .notice-bar p{color:var(--muted);font-size:13px;margin:3px 0 0}
    .site-footer{padding:58px 0 22px;background:#fff;border-top:1px solid var(--line)}
    .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:38px}
    .footer-brand p{max-width:315px;color:var(--muted);font-size:13px}
    .footer-col{display:flex;flex-direction:column;gap:8px}
    .footer-col h3{font-size:14px;margin:4px 0 8px}
    .footer-col a{color:var(--muted);font-size:13px;transition:color .2s}
    .footer-col a:hover{color:var(--blue)}
    .copyright{margin-top:42px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
    .bottom-bar{position:fixed;z-index:40;left:0;right:0;bottom:0;padding:12px 0;background:rgba(255,255,255,.96);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(30,64,175,.06)}
    .bottom-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
    .bottom-inner p{margin:0;color:var(--muted);font-size:13px}
    @media (max-width:1024px){
      .nav-links{gap:13px}
      .nav-actions .button-secondary{display:none}
      .hero-layout{gap:32px}
      .content-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}
      .side-note{border-bottom:0;padding:0}
    }
    @media (max-width:768px){
      .container{width:min(var(--max),calc(100% - 32px))}
      .nav-wrap{min-height:66px}
      .nav-links{display:none;position:absolute;left:16px;right:16px;top:74px;padding:12px;background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch;gap:0}
      .nav-links.open{display:flex}
      .nav-links a{padding:11px 12px;border-bottom:1px solid #edf2f8}
      .nav-links a:last-child{border-bottom:0}
      .nav-links a.active:after{display:none}
      .nav-actions{margin-left:auto}
      .nav-actions .button-primary{min-height:40px;padding:0 13px;font-size:13px}
      .menu-toggle{display:grid;place-items:center}
      section{padding:56px 0}
      .category-hero{padding:46px 0 42px}
      .hero-layout,.news-layout,.faq-grid{grid-template-columns:1fr}
      .category-visual{min-height:280px}
      .group-grid{grid-template-columns:1fr}
      .rank-strip{grid-template-columns:repeat(2,1fr)}
      .rank-item:nth-child(2){border-right:0}
      .rank-item:nth-child(-n+2){border-bottom:1px solid var(--line)}
      .footer-grid{grid-template-columns:repeat(2,1fr);gap:28px}
      .footer-brand{grid-column:1/-1}
      .bottom-inner p{display:none}
      .bottom-inner{justify-content:center}
    }
    @media (max-width:520px){
      body{padding-bottom:70px}
      h1{font-size:34px}
      .hero-tags{gap:6px}
      .filter-bar{align-items:flex-start}
      .movie-row{grid-template-columns:88px minmax(0,1fr);gap:13px;padding:11px}
      .movie-row .poster{height:122px}
      .score{grid-column:2;grid-row:1;justify-self:start;text-align:left;min-width:0;font-size:16px}
      .poster-copy p{font-size:12px}
      .side-panel{display:block}
      .side-note{padding:12px 0;border-bottom:1px solid var(--line)}
      .rank-strip{grid-template-columns:1fr 1fr}
      .news-item{display:block}
      .news-item span{display:block;margin-top:4px}
      .footer-grid{grid-template-columns:1fr}
      .footer-brand{grid-column:auto}
      .notice-bar{display:block}
      .notice-bar .button{margin-top:14px}
    }
    @media (prefers-reduced-motion:reduce){
      *,*:before,*:after{scroll-behavior:auto!important;transition:none!important}
    }