/* roulang page: index */
:root {
      --primary: #2168f3;
      --primary-dark: #164ec7;
      --primary-soft: #eaf2ff;
      --accent: #18b981;
      --accent-soft: #e8f8f1;
      --warning: #f59e0b;
      --danger: #e5484d;
      --ink: #122033;
      --text: #334155;
      --muted: #64748b;
      --line: #dbe5f2;
      --bg: #f7fbff;
      --paper: #ffffff;
      --soft: #f1f7ff;
      --dark: #10233d;
      --dark-2: #173454;
      --radius-sm: 10px;
      --radius: 16px;
      --radius-lg: 22px;
      --shadow: 0 14px 36px rgba(36, 82, 140, .12);
      --shadow-hover: 0 18px 46px rgba(33, 104, 243, .17);
      --container: 1220px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 138px;
    }

    body {
      margin: 0;
      font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;
      color: var(--text);
      background: var(--bg);
      line-height: 1.78;
      font-size: 16px;
      overflow-x: hidden;
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease;
    }

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

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

    button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    .accordion-button:focus-visible {
      outline: 3px solid rgba(33, 104, 243, .28);
      outline-offset: 3px;
      box-shadow: none;
    }

    .site-container {
      width: min(100% - 32px, var(--container));
      margin-inline: auto;
    }

    .section {
      padding: 96px 0;
      position: relative;
    }

    .section-tight {
      padding: 72px 0;
    }

    .section-soft {
      background: var(--soft);
    }

    .section-head {
      max-width: 780px;
      margin-bottom: 34px;
    }

    .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 12px;
      border-radius: 999px;
      background: var(--primary-soft);
      color: var(--primary-dark);
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 14px;
    }

    .section-kicker::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--accent);
    }

    h1,
    h2,
    h3,
    h4 {
      color: var(--ink);
      line-height: 1.2;
      margin: 0;
      font-weight: 800;
      letter-spacing: 0;
    }

    h1 {
      font-size: clamp(34px, 5vw, 56px);
      max-width: 920px;
    }

    h2 {
      font-size: clamp(28px, 3.6vw, 40px);
    }

    h3 {
      font-size: 21px;
    }

    p {
      margin: 0;
    }

    .lead {
      color: var(--muted);
      font-size: 17px;
      line-height: 1.9;
      margin-top: 16px;
    }

    .btn {
      min-height: 46px;
      border-radius: 12px;
      padding: 11px 20px;
      font-weight: 700;
      border-width: 1px;
      transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
    }

    .btn-primary {
      background: var(--primary);
      border-color: var(--primary);
      color: #fff;
      box-shadow: 0 10px 20px rgba(33, 104, 243, .2);
    }

    .btn-primary:hover,
    .btn-primary:active {
      background: var(--primary-dark) !important;
      border-color: var(--primary-dark) !important;
      transform: translateY(-2px);
      box-shadow: var(--shadow-hover);
    }

    .btn-outline-primary {
      color: var(--primary-dark);
      border-color: rgba(33, 104, 243, .3);
      background: #fff;
    }

    .btn-outline-primary:hover,
    .btn-outline-primary:active {
      background: var(--primary-soft) !important;
      border-color: var(--primary) !important;
      color: var(--primary-dark) !important;
      transform: translateY(-2px);
    }

    .tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: 999px;
      background: #fff;
      color: var(--muted);
      border: 1px solid var(--line);
      font-size: 13px;
      font-weight: 700;
      white-space: nowrap;
    }

    .tag.live {
      color: #087a55;
      background: var(--accent-soft);
      border-color: rgba(24, 185, 129, .25);
    }

    .tag.warn {
      color: #9a5b00;
      background: #fff6df;
      border-color: rgba(245, 158, 11, .25);
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 1030;
      background: rgba(255, 255, 255, .96);
      backdrop-filter: saturate(160%) blur(12px);
      border-bottom: 1px solid rgba(219, 229, 242, .8);
      box-shadow: 0 10px 30px rgba(15, 35, 65, .05);
    }

    .topbar {
      border-bottom: 1px solid var(--line);
    }

    .topbar-inner,
    .navline-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 22px;
    }

    .topbar-inner {
      min-height: 70px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-weight: 900;
      color: var(--ink);
      font-size: 20px;
      min-height: 48px;
    }

    .brand-mark {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      background: linear-gradient(135deg, var(--primary), #4fb4ff);
      color: #fff;
      display: grid;
      place-items: center;
      box-shadow: 0 12px 24px rgba(33, 104, 243, .22);
      position: relative;
      overflow: hidden;
    }

    .brand-mark::after {
      content: "";
      width: 18px;
      height: 18px;
      border: 3px solid rgba(255, 255, 255, .9);
      border-radius: 50%;
      position: absolute;
      right: -2px;
      bottom: -2px;
    }

    .top-actions {
      display: flex;
      align-items: center;
      gap: 14px;
      min-width: 0;
    }

    .update-note {
      color: var(--muted);
      font-size: 14px;
      white-space: nowrap;
    }

    .search-box {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 260px;
      height: 42px;
      padding: 0 12px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      color: var(--muted);
    }

    .search-box input {
      border: 0;
      outline: 0;
      min-width: 0;
      width: 100%;
      color: var(--text);
      background: transparent;
      font-size: 14px;
    }

    .search-box input::placeholder,
    .form-control::placeholder,
    textarea::placeholder {
      color: #94a3b8;
    }

    .menu-toggle {
      display: none;
      width: 46px;
      height: 46px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      color: var(--ink);
    }

    .menu-toggle span {
      display: block;
      width: 20px;
      height: 2px;
      margin: 5px auto;
      background: currentColor;
      border-radius: 2px;
    }

    .navline-inner {
      min-height: 56px;
    }

    .main-nav {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .main-nav a {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      padding: 0 14px;
      border-radius: 11px;
      color: var(--text);
      font-weight: 700;
      font-size: 15px;
    }

    .main-nav a:hover,
    .main-nav a.active {
      color: var(--primary-dark);
      background: var(--primary-soft);
    }

    .nav-contact {
      font-size: 14px;
      color: var(--muted);
      white-space: nowrap;
    }

    .hero {
      background: #fff;
      padding: 0;
    }

    .hero-carousel,
    .hero-slide {
      min-height: 640px;
    }

    .hero-slide {
      position: relative;
      display: flex;
      align-items: center;
      background-size: cover;
      background-position: center;
      isolation: isolate;
    }

    .hero-slide::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(247, 251, 255, .96) 0%, rgba(247, 251, 255, .84) 45%, rgba(247, 251, 255, .36) 100%);
      z-index: -1;
    }

    .hero-content {
      width: min(100% - 32px, var(--container));
      margin-inline: auto;
      padding: 96px 0 118px;
    }

    .hero-brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 14px;
      border: 1px solid rgba(33, 104, 243, .18);
      border-radius: 999px;
      color: var(--primary-dark);
      background: rgba(255, 255, 255, .84);
      font-weight: 800;
      margin-bottom: 18px;
      box-shadow: 0 8px 22px rgba(33, 104, 243, .08);
    }

    .hero-copy {
      max-width: 780px;
      margin-top: 18px;
      font-size: 18px;
      color: #475569;
      line-height: 1.9;
    }

    .hero-actions {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      margin-top: 28px;
    }

    .hero-points {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 30px;
    }

    .hero-point {
      display: inline-flex;
      flex-direction: column;
      min-width: 150px;
      padding: 14px 16px;
      border: 1px solid rgba(219, 229, 242, .9);
      border-radius: 16px;
      background: rgba(255, 255, 255, .86);
      box-shadow: 0 10px 24px rgba(20, 50, 90, .08);
    }

    .hero-point strong {
      color: var(--ink);
      font-size: 22px;
      line-height: 1.1;
    }

    .hero-point span {
      color: var(--muted);
      font-size: 13px;
      margin-top: 5px;
    }

    .carousel-indicators {
      margin-bottom: 30px;
      gap: 8px;
    }

    .carousel-indicators [data-bs-target] {
      width: 34px;
      height: 6px;
      border: 0;
      border-radius: 999px;
      background: rgba(33, 104, 243, .35);
      opacity: 1;
    }

    .carousel-indicators .active {
      background: var(--primary);
    }

    .carousel-control-prev,
    .carousel-control-next {
      width: 54px;
      height: 54px;
      top: 50%;
      transform: translateY(-50%);
      border-radius: 50%;
      background: rgba(255, 255, 255, .84);
      border: 1px solid var(--line);
      opacity: 1;
      margin: 0 22px;
      box-shadow: var(--shadow);
    }

    .carousel-control-prev:hover,
    .carousel-control-next:hover {
      background: #fff;
      box-shadow: var(--shadow-hover);
    }

    .entry-strip {
      margin-top: -54px;
      position: relative;
      z-index: 5;
    }

    .entry-panel {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 22px;
      box-shadow: var(--shadow);
      padding: 18px;
      display: grid;
      grid-template-columns: 1.2fr repeat(3, 1fr);
      gap: 12px;
    }

    .entry-item {
      min-height: 92px;
      border-radius: 16px;
      padding: 16px;
      background: var(--soft);
      border: 1px solid transparent;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .entry-item:hover {
      border-color: rgba(33, 104, 243, .28);
      transform: translateY(-2px);
      background: #fff;
    }

    .entry-item strong {
      color: var(--ink);
      font-size: 17px;
    }

    .entry-item span {
      color: var(--muted);
      font-size: 14px;
      margin-top: 4px;
    }

    .media-feature {
      display: grid;
      grid-template-columns: .92fr 1.08fr;
      gap: 42px;
      align-items: center;
    }

    .image-stage {
      position: relative;
      border-radius: 24px;
      overflow: hidden;
      box-shadow: var(--shadow);
      border: 1px solid var(--line);
      background: #fff;
    }

    .image-stage img {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
    }

    .floating-stat {
      position: absolute;
      left: 22px;
      bottom: 22px;
      padding: 14px 16px;
      border-radius: 16px;
      background: rgba(255, 255, 255, .92);
      border: 1px solid rgba(219, 229, 242, .9);
      box-shadow: 0 10px 24px rgba(15, 35, 65, .12);
    }

    .floating-stat strong {
      display: block;
      color: var(--ink);
      font-size: 24px;
      line-height: 1.1;
    }

    .floating-stat span {
      color: var(--muted);
      font-size: 13px;
    }

    .info-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 24px;
    }

    .metric-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin-top: 26px;
    }

    .metric-mini {
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #fff;
    }

    .metric-mini strong {
      color: var(--ink);
      font-size: 25px;
      display: block;
      line-height: 1.15;
    }

    .metric-mini span {
      color: var(--muted);
      font-size: 13px;
    }

    .service-grid {
      display: grid;
      grid-template-columns: 1.15fr .85fr .85fr;
      grid-template-rows: repeat(2, minmax(188px, auto));
      gap: 18px;
    }

    .service-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 24px;
      box-shadow: 0 10px 26px rgba(15, 35, 65, .06);
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
      min-width: 0;
    }

    .service-card:hover {
      transform: translateY(-4px);
      border-color: rgba(33, 104, 243, .28);
      box-shadow: var(--shadow-hover);
    }

    .service-card.primary-card {
      grid-row: span 2;
      background: linear-gradient(180deg, #ffffff 0%, #eef6ff 100%);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .service-card img {
      width: 100%;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      border-radius: 16px;
      margin-top: 22px;
      border: 1px solid var(--line);
    }

    .service-card p,
    .case-card p,
    .story-card p,
    .review-card p {
      color: var(--muted);
      margin-top: 10px;
      font-size: 15px;
      line-height: 1.75;
    }

    .card-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 16px;
    }

    .data-band {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 24px;
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .data-band-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
    }

    .data-cell {
      padding: 28px 20px;
      border-right: 1px solid var(--line);
    }

    .data-cell:last-child {
      border-right: 0;
    }

    .data-cell strong {
      display: block;
      color: var(--ink);
      font-size: 32px;
      line-height: 1.1;
    }

    .data-cell span {
      color: var(--muted);
      font-size: 14px;
      display: block;
      margin-top: 8px;
    }

    .progress-lanes {
      display: grid;
      gap: 14px;
      margin-top: 28px;
    }

    .lane {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 16px;
    }

    .lane-head {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      color: var(--ink);
      font-weight: 800;
      margin-bottom: 10px;
    }

    .lane-track {
      height: 10px;
      border-radius: 999px;
      background: #e8eff8;
      overflow: hidden;
    }

    .lane-fill {
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--primary), #38bdf8);
    }

    .timeline {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 0;
      position: relative;
      margin-top: 32px;
    }

    .timeline::before {
      content: "";
      position: absolute;
      left: 7%;
      right: 7%;
      top: 28px;
      height: 2px;
      background: var(--line);
    }

    .step {
      position: relative;
      padding: 0 12px;
      z-index: 1;
    }

    .step-dot {
      width: 56px;
      height: 56px;
      border-radius: 18px;
      background: #fff;
      border: 1px solid rgba(33, 104, 243, .24);
      box-shadow: var(--shadow);
      color: var(--primary);
      display: grid;
      place-items: center;
      font-weight: 900;
      margin-bottom: 18px;
    }

    .step h3 {
      font-size: 18px;
    }

    .step p {
      color: var(--muted);
      font-size: 14px;
      margin-top: 8px;
      line-height: 1.75;
    }

    .case-layout {
      display: grid;
      grid-template-columns: 1.08fr .92fr;
      gap: 18px;
      align-items: stretch;
    }

    .case-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 10px 28px rgba(15, 35, 65, .07);
      transition: transform .2s ease, box-shadow .2s ease;
    }

    .case-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-hover);
    }

    .case-card.large img {
      aspect-ratio: 16 / 10;
    }

    .case-card img {
      width: 100%;
      aspect-ratio: 16 / 8;
      object-fit: cover;
    }

    .case-body {
      padding: 22px;
    }

    .case-stack {
      display: grid;
      gap: 18px;
    }

    .news-layout {
      display: grid;
      grid-template-columns: 1fr .9fr;
      gap: 22px;
      align-items: start;
    }

    .featured-news {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 22px;
      padding: 24px;
      box-shadow: var(--shadow);
    }

    .featured-news img {
      border-radius: 16px;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      width: 100%;
      margin-bottom: 18px;
    }

    .news-list {
      display: grid;
      gap: 12px;
    }

    .news-item {
      display: grid;
      grid-template-columns: 92px 1fr;
      gap: 16px;
      padding: 18px;
      border-radius: 16px;
      background: #fff;
      border: 1px solid var(--line);
      box-shadow: 0 8px 22px rgba(15, 35, 65, .05);
    }

    .news-date {
      color: var(--primary-dark);
      font-weight: 900;
      border-right: 1px solid var(--line);
      line-height: 1.25;
    }

    .news-date span {
      display: block;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
      margin-top: 5px;
    }

    .news-item h3 {
      font-size: 18px;
    }

    .news-item p {
      margin-top: 6px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.7;
    }

    .partner-wall {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .partner-pill {
      min-height: 52px;
      padding: 13px 18px;
      display: inline-flex;
      align-items: center;
      border-radius: 14px;
      background: #fff;
      border: 1px solid var(--line);
      color: var(--muted);
      font-weight: 800;
      box-shadow: 0 8px 20px rgba(15, 35, 65, .05);
    }

    .story-track {
      display: grid;
      grid-template-columns: 1.2fr .8fr .8fr;
      gap: 18px;
    }

    .story-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 10px 26px rgba(15, 35, 65, .06);
    }

    .story-card img {
      width: 100%;
      aspect-ratio: 16 / 9;
      object-fit: cover;
    }

    .story-body {
      padding: 22px;
    }

    .stats-panel {
      background: var(--dark);
      color: rgba(255, 255, 255, .78);
      border-radius: 26px;
      padding: 36px;
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .stats-panel h2 {
      color: #fff;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-top: 28px;
    }

    .stat-card {
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 18px;
      padding: 20px;
    }

    .stat-card strong {
      display: block;
      color: #fff;
      font-size: 34px;
      line-height: 1.1;
    }

    .stat-card span {
      display: block;
      margin-top: 8px;
      color: rgba(255, 255, 255, .72);
      font-size: 14px;
    }

    .review-card {
      display: grid;
      grid-template-columns: 280px 1fr;
      gap: 28px;
      align-items: center;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 24px;
      padding: 24px;
      box-shadow: var(--shadow);
    }

    .review-card img {
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      border-radius: 18px;
    }

    .score {
      display: flex;
      gap: 4px;
      color: var(--warning);
      font-size: 20px;
      margin-bottom: 14px;
    }

    .accordion {
      display: grid;
      gap: 14px;
    }

    .accordion-item {
      border: 1px solid var(--line) !important;
      border-radius: 16px !important;
      overflow: hidden;
      box-shadow: 0 8px 22px rgba(15, 35, 65, .05);
      background: #fff;
    }

    .accordion-button {
      min-height: 58px;
      color: var(--ink);
      font-weight: 800;
      background: #fff;
      padding: 18px 20px;
      border: 0;
    }

    .accordion-button:not(.collapsed) {
      color: var(--primary-dark);
      background: var(--primary-soft);
      box-shadow: none;
    }

    .accordion-button::after {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background-color: #fff;
      background-position: center;
      background-size: 13px;
      border: 1px solid rgba(33, 104, 243, .22);
    }

    .accordion-body {
      padding: 18px 20px 22px;
      color: var(--muted);
      line-height: 1.85;
    }

    .guarantee {
      background: var(--dark-2);
      color: rgba(255, 255, 255, .78);
      border-radius: 0;
    }

    .guarantee h2 {
      color: #fff;
    }

    .guarantee-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-top: 30px;
    }

    .guarantee-item {
      padding: 20px;
      border-radius: 16px;
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .14);
    }

    .guarantee-item strong {
      display: block;
      color: #fff;
      margin-bottom: 8px;
    }

    .contact-panel {
      display: grid;
      grid-template-columns: .88fr 1.12fr;
      gap: 28px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 26px;
      padding: 34px;
      box-shadow: var(--shadow);
    }

    .contact-info {
      background: linear-gradient(180deg, var(--primary-soft), #ffffff);
      border-radius: 20px;
      padding: 28px;
      border: 1px solid rgba(33, 104, 243, .12);
    }

    .contact-list {
      display: grid;
      gap: 12px;
      margin-top: 24px;
    }

    .contact-list div {
      padding: 14px;
      border-radius: 14px;
      background: #fff;
      border: 1px solid var(--line);
      color: var(--text);
    }

    .form-label {
      color: var(--ink);
      font-weight: 800;
      margin-bottom: 8px;
    }

    .form-control,
    .form-select {
      min-height: 46px;
      border: 1px solid var(--line);
      border-radius: 12px;
      color: var(--text);
      background-color: #fff;
      padding: 11px 13px;
    }

    textarea.form-control {
      min-height: 118px;
      resize: vertical;
    }

    .form-control:focus,
    .form-select:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 .22rem rgba(33, 104, 243, .12);
    }

    .form-note {
      color: var(--muted);
      font-size: 13px;
      margin-top: 12px;
    }

    .site-footer {
      background: #0d1b2d;
      color: rgba(255, 255, 255, .72);
      padding: 56px 0 28px;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.2fr .8fr .8fr;
      gap: 28px;
      padding-bottom: 32px;
      border-bottom: 1px solid rgba(255, 255, 255, .12);
    }

    .footer-brand {
      color: #fff;
      font-size: 22px;
      font-weight: 900;
      margin-bottom: 12px;
    }

    .footer-title {
      color: #fff;
      font-weight: 900;
      margin-bottom: 12px;
    }

    .footer-links {
      display: grid;
      gap: 9px;
    }

    .footer-links a:hover {
      color: #fff;
    }

    .copyright {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 12px;
      padding-top: 22px;
      font-size: 14px;
      color: rgba(255, 255, 255, .58);
    }

    @media (max-width: 1199.98px) {
      .site-container {
        width: min(100% - 28px, 1060px);
      }

      .service-grid,
      .story-track {
        grid-template-columns: 1fr 1fr;
      }

      .service-card.primary-card {
        grid-column: span 2;
        grid-row: auto;
      }

      .data-band-grid,
      .stats-grid {
        grid-template-columns: repeat(3, 1fr);
      }

      .guarantee-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 991.98px) {
      html {
        scroll-padding-top: 82px;
      }

      .topbar-inner {
        min-height: 66px;
      }

      .top-actions .update-note,
      .top-actions .search-box,
      .nav-contact {
        display: none;
      }

      .menu-toggle {
        display: inline-block;
      }

      .navline {
        display: none;
      }

      .navline.show {
        display: block;
      }

      .navline-inner {
        min-height: auto;
        padding: 12px 0 16px;
        align-items: stretch;
      }

      .main-nav {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }

      .main-nav a {
        background: #fff;
        border: 1px solid var(--line);
      }

      .hero-carousel,
      .hero-slide {
        min-height: 600px;
      }

      .carousel-control-prev,
      .carousel-control-next {
        display: none;
      }

      .entry-panel,
      .media-feature,
      .case-layout,
      .news-layout,
      .review-card,
      .contact-panel,
      .footer-grid {
        grid-template-columns: 1fr;
      }

      .timeline {
        grid-template-columns: 1fr;
        gap: 18px;
      }

      .timeline::before {
        left: 28px;
        right: auto;
        top: 18px;
        bottom: 18px;
        width: 2px;
        height: auto;
      }

      .step {
        padding-left: 82px;
      }

      .step-dot {
        position: absolute;
        left: 0;
        top: 0;
      }

      .section {
        padding: 72px 0;
      }
    }

    @media (max-width: 767.98px) {
      body {
        font-size: 15px;
      }

      .brand {
        font-size: 18px;
      }

      .hero-content {
        padding: 72px 0 104px;
      }

      .hero-copy {
        font-size: 16px;
      }

      .hero-actions .btn {
        width: 100%;
      }

      .hero-points {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .entry-strip {
        margin-top: -36px;
      }

      .entry-panel {
        padding: 12px;
      }

      .metric-row,
      .service-grid,
      .data-band-grid,
      .stats-grid,
      .story-track,
      .guarantee-grid {
        grid-template-columns: 1fr;
      }

      .service-card.primary-card {
        grid-column: auto;
      }

      .data-cell {
        border-right: 0;
        border-bottom: 1px solid var(--line);
      }

      .data-cell:last-child {
        border-bottom: 0;
      }

      .news-item {
        grid-template-columns: 1fr;
      }

      .news-date {
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding-bottom: 10px;
      }

      .contact-panel,
      .stats-panel {
        padding: 22px;
        border-radius: 20px;
      }

      .footer-grid {
        gap: 22px;
      }

      .copyright {
        display: grid;
      }
    }

    @media (max-width: 575.98px) {
      .site-container {
        width: min(100% - 24px, var(--container));
      }

      h1 {
        font-size: 32px;
      }

      h2 {
        font-size: 27px;
      }

      .section {
        padding: 58px 0;
      }

      .main-nav {
        grid-template-columns: 1fr;
      }

      .hero-carousel,
      .hero-slide {
        min-height: 650px;
      }

      .hero-points {
        grid-template-columns: 1fr;
      }

      .brand-mark {
        width: 38px;
        height: 38px;
        border-radius: 12px;
      }

      .topbar-inner {
        gap: 10px;
      }

      .floating-stat {
        left: 14px;
        right: 14px;
        bottom: 14px;
      }

      .partner-pill {
        width: 100%;
        justify-content: center;
      }
    }

/* roulang page: category2 */
:root{--primary:#2168f3;--primary-dark:#164ec7;--primary-soft:#eaf2ff;--accent:#18b981;--accent-soft:#e8f8f1;--warning:#f59e0b;--danger:#e5484d;--ink:#122033;--text:#334155;--muted:#64748b;--line:#dbe5f2;--bg:#f7fbff;--paper:#fff;--soft:#f1f7ff;--dark:#10233d;--dark-2:#173454;--radius-sm:10px;--radius:16px;--radius-lg:22px;--shadow:0 14px 36px rgba(36,82,140,.12);--shadow-hover:0 18px 46px rgba(33,104,243,.17);--container:1220px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:140px}body{margin:0;background:var(--bg);font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;color:var(--text);font-size:16px;line-height:1.78;overflow-x:hidden}a{color:inherit;text-decoration:none;transition:.22s ease}img{max-width:100%;display:block}button,input,select,textarea{font:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.accordion-button:focus-visible{outline:3px solid rgba(33,104,243,.28);outline-offset:3px;box-shadow:none}.site-container{width:min(100% - 32px,var(--container));margin-inline:auto}.section{padding:88px 0;position:relative}.section-soft{background:var(--soft)}.section-kicker{display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border-radius:999px;background:var(--primary-soft);color:var(--primary-dark);font-size:13px;font-weight:800}.section-kicker:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}h1,h2,h3,p{margin-top:0}h1,h2,h3{color:var(--ink);font-weight:850;letter-spacing:-.03em}.section-title{font-size:clamp(28px,3.2vw,40px);margin:14px 0}.lead{max-width:760px;color:var(--muted);font-size:17px;line-height:1.9}.btn{min-height:46px;padding:11px 20px;border-radius:12px;font-weight:800;border-width:1px}.btn-primary{background:var(--primary);border-color:var(--primary);box-shadow:0 10px 20px rgba(33,104,243,.2)}.btn-primary:hover,.btn-primary:active{background:var(--primary-dark)!important;border-color:var(--primary-dark)!important;transform:translateY(-2px);box-shadow:var(--shadow-hover)}.btn-outline-primary{color:var(--primary-dark);border-color:rgba(33,104,243,.3);background:#fff}.btn-outline-primary:hover{background:var(--primary-soft);border-color:var(--primary);color:var(--primary-dark);transform:translateY(-2px)}.tag{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--muted);font-size:13px;font-weight:750;white-space:nowrap}.tag.live{color:#087a55;background:var(--accent-soft);border-color:rgba(24,185,129,.25)}.tag.warn{color:#9a5b00;background:#fff6df;border-color:rgba(245,158,11,.25)}
.site-header{position:sticky;top:0;z-index:1030;background:rgba(255,255,255,.96);backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid rgba(219,229,242,.85);box-shadow:0 10px 30px rgba(15,35,65,.05)}.topbar{border-bottom:1px solid var(--line)}.topbar-inner,.navline-inner{display:flex;align-items:center;justify-content:space-between;gap:22px}.topbar-inner{min-height:70px}.brand{display:inline-flex;align-items:center;gap:12px;min-height:48px;color:var(--ink);font-size:20px;font-weight:900}.brand-mark{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,var(--primary),#4fb4ff);color:#fff;box-shadow:0 12px 24px rgba(33,104,243,.22);font-size:19px}.header-meta{display:flex;align-items:center;gap:18px;color:var(--muted);font-size:13px}.header-meta strong{color:var(--accent);font-weight:800}.search-box{display:flex;align-items:center;gap:8px;width:250px;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--muted)}.search-box input{width:100%;min-width:0;border:0;outline:0;background:transparent;font-size:14px}.menu-toggle{display:none;width:46px;height:46px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink)}.menu-toggle span{display:block;width:20px;height:2px;margin:5px auto;border-radius:2px;background:currentColor}.navline-inner{min-height:56px}.main-nav{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.main-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 13px;color:#4b5d74;font-size:14px;font-weight:750;border-bottom:2px solid transparent}.main-nav a:hover{color:var(--primary);background:var(--primary-soft)}.main-nav a.active{color:var(--primary-dark);border-bottom-color:var(--primary);background:linear-gradient(180deg,transparent 45%,var(--primary-soft))}
.page-banner{padding:52px 0 56px;background:linear-gradient(100deg,rgba(234,242,255,.98),rgba(247,251,255,.88)),url('/assets/images/backpic/back-2.webp') center/cover}.breadcrumb{margin:0 0 19px;font-size:14px}.breadcrumb-item,.breadcrumb-item a{color:var(--muted)}.breadcrumb-item.active{color:var(--primary-dark);font-weight:700}.breadcrumb-item+.breadcrumb-item::before{color:#95a7bf}.page-banner h1{max-width:800px;margin-bottom:14px;font-size:clamp(34px,5vw,54px)}.page-banner p{max-width:760px;margin:0;color:var(--muted);font-size:17px}
.summary-strip{margin-top:-27px;position:relative;z-index:2}.summary-card{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}.summary-item{padding:22px 26px;border-right:1px solid var(--line)}.summary-item:last-child{border-right:0}.summary-item b{display:block;color:var(--ink);font-size:23px;line-height:1.25}.summary-item span{display:block;margin-top:5px;color:var(--muted);font-size:13px}.data-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:28px;align-items:start}.filter-panel{padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:0 8px 20px rgba(36,82,140,.06);position:sticky;top:148px}.filter-title{margin:0 0 15px;color:var(--ink);font-weight:850;font-size:17px}.filter-group{padding:16px 0;border-top:1px solid var(--line)}.filter-group:first-of-type{border-top:0}.filter-group label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:9px 0;cursor:pointer;color:#526278;font-size:14px}.filter-group input{accent-color:var(--primary)}.filter-count{color:#97a6b9;font-size:12px}.match-board{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow)}.board-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;border-bottom:1px solid var(--line)}.board-head h2{margin:0;font-size:21px}.date-chip{display:flex;align-items:center;gap:7px;color:var(--primary-dark);font-size:14px;font-weight:800}.league-row{display:flex;align-items:center;gap:9px;padding:12px 24px;background:#f8fbff;color:#54657a;font-size:13px;font-weight:800}.league-dot{width:8px;height:8px;border-radius:50%;background:var(--primary)}.match-row{display:grid;grid-template-columns:104px 1fr 86px 1fr 126px;align-items:center;gap:14px;padding:18px 24px;border-top:1px solid #edf2f8;transition:.2s ease}.match-row:hover{background:#f8fbff}.match-time{color:var(--muted);font-size:14px;font-weight:750}.match-time strong{display:block;color:var(--ink);font-size:15px}.team{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:750}.team-mark{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--primary-soft);color:var(--primary);font-size:12px;font-weight:900}.score{color:var(--ink);font-size:20px;font-weight:900;text-align:center}.status{justify-self:end}.more-row{padding:17px 24px;text-align:center;border-top:1px solid var(--line)}.more-link{display:inline-flex;align-items:center;gap:7px;color:var(--primary-dark);font-size:14px;font-weight:850}.more-link:hover{color:var(--primary);transform:translateX(3px)}
.info-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:42px;align-items:center}.info-image{overflow:hidden;border-radius:var(--radius-lg);box-shadow:var(--shadow)}.info-image img{width:100%;height:400px;object-fit:cover}.metric-list{display:grid;gap:12px;margin-top:24px}.metric{display:flex;align-items:flex-start;gap:14px;padding:16px;border:1px solid var(--line);border-radius:14px;background:#fff}.metric-icon{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:12px;background:var(--primary-soft);color:var(--primary);font-weight:900}.metric b{display:block;color:var(--ink);margin-bottom:2px}.metric span{color:var(--muted);font-size:14px}
.rail{display:flex;gap:16px;overflow:auto;padding:5px 2px 14px;scrollbar-color:#bfd1ed transparent}.rail-card{flex:0 0 285px;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:0 8px 22px rgba(36,82,140,.07);transition:.22s ease}.rail-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover);border-color:#bdd2fa}.rail-card img{width:100%;height:150px;object-fit:cover}.rail-card-body{padding:17px}.rail-card h3{font-size:18px;margin-bottom:8px}.rail-card p{margin:0;color:var(--muted);font-size:14px}.news-list{border-top:1px solid var(--line)}.news-item{display:grid;grid-template-columns:110px 1fr auto;gap:22px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line)}.news-date{color:var(--primary);font-size:14px;font-weight:850}.news-item h3{margin:0;font-size:18px}.news-item p{margin:4px 0 0;color:var(--muted);font-size:14px}.rule-table{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:#fff}.rule-row{display:grid;grid-template-columns:200px 1fr;padding:17px 22px;border-bottom:1px solid var(--line)}.rule-row:last-child{border-bottom:0}.rule-row b{color:var(--ink)}.rule-row span{color:var(--muted);font-size:14px}
.faq-wrap{max-width:920px;margin:auto}.accordion-item{margin-bottom:12px;overflow:hidden;border:1px solid var(--line)!important;border-radius:14px!important;background:#fff;box-shadow:0 6px 18px rgba(36,82,140,.05)}.accordion-button{padding:18px 20px;background:#fff;color:var(--ink);font-weight:800}.accordion-button:not(.collapsed){background:var(--primary-soft);color:var(--primary-dark);box-shadow:none}.accordion-button::after{background-size:1rem}.accordion-body{padding:0 20px 20px;color:var(--muted);font-size:15px}.cta-section{padding:74px 0;background:var(--dark)}.cta-box{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:42px;background:var(--dark-2);border:1px solid rgba(255,255,255,.13);border-radius:var(--radius-lg)}.cta-box h2{color:#fff;font-size:32px;margin-bottom:10px}.cta-box p{max-width:670px;margin:0;color:#c4d4e7}.cta-box .btn-outline-primary{border-color:rgba(255,255,255,.45);background:transparent;color:#fff}.cta-box .btn-outline-primary:hover{background:#fff;color:var(--primary-dark)}
.site-footer{padding:62px 0 22px;background:#0d1d32;color:#bbcadb}.footer-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:54px;padding-bottom:42px}.footer-brand{color:#fff;font-size:21px;font-weight:900;margin-bottom:14px}.site-footer p{max-width:420px;margin:0;color:#aebed0;font-size:14px}.footer-title{margin-bottom:14px;color:#fff;font-size:15px;font-weight:850}.footer-links{display:grid;gap:8px;font-size:14px;color:#aebed0}.copyright{display:flex;justify-content:space-between;gap:18px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:#8fa4bb}
@media(max-width:991.98px){.header-meta,.search-box{display:none}.menu-toggle{display:block}.navline-inner{align-items:stretch;min-height:0}.main-nav{display:none;width:100%;padding:8px 0 14px}.main-nav.show{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.main-nav a{border:1px solid transparent;border-radius:9px}.main-nav a.active{border-color:#c9dcff}.summary-card{grid-template-columns:repeat(2,1fr)}.summary-item:nth-child(2){border-right:0}.summary-item:nth-child(-n+2){border-bottom:1px solid var(--line)}.data-layout{grid-template-columns:1fr}.filter-panel{position:static;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.filter-title{grid-column:1/-1;margin:0}.filter-group{padding:0;border:0}.info-grid{gap:26px}.footer-grid{grid-template-columns:1fr 1fr;gap:34px}.footer-grid>div:first-child{grid-column:1/-1}}
@media(max-width:767.98px){.section{padding:62px 0}.page-banner{padding:37px 0 50px}.page-banner p,.lead{font-size:16px}.summary-strip{margin-top:-22px}.summary-item{padding:17px}.summary-item b{font-size:19px}.filter-panel{display:block}.filter-group{padding:13px 0;border-top:1px solid var(--line)}.filter-group:first-of-type{border-top:0}.match-board{border-radius:16px}.board-head{padding:17px}.match-row{grid-template-columns:68px 1fr 50px;gap:9px;padding:15px}.match-row .team:last-of-type{grid-column:2}.match-row .status{grid-column:3;grid-row:1/3}.match-time{grid-row:1/3}.score{font-size:18px}.info-grid{grid-template-columns:1fr}.info-image img{height:280px}.news-item{grid-template-columns:1fr;gap:5px}.news-item .tag{width:max-content}.rule-row{grid-template-columns:1fr;gap:5px}.cta-box{display:block;padding:31px 24px}.cta-box h2{font-size:27px}.cta-box .d-flex{margin-top:23px}.footer-grid{grid-template-columns:1fr}.footer-grid>div:first-child{grid-column:auto}.copyright{display:grid}.main-nav.show{grid-template-columns:1fr}}
@media(max-width:420px){.site-container{width:min(100% - 24px,var(--container))}.brand{font-size:18px}.brand-mark{width:39px;height:39px}.summary-card{grid-template-columns:1fr}.summary-item,.summary-item:nth-child(2){border-right:0;border-bottom:1px solid var(--line)}.summary-item:last-child{border-bottom:0}.page-banner h1{font-size:34px}.board-head{align-items:flex-start;flex-direction:column}.match-row{grid-template-columns:53px 1fr 42px;padding:14px 10px}.team{font-size:13px;gap:6px}.team-mark{width:25px;height:25px;flex:0 0 25px}.status{font-size:11px;padding:5px}.cta-box .d-flex{flex-direction:column}.cta-box .btn{width:100%}}

/* roulang page: category1 */
:root{
      --primary:#2168f3;--primary-dark:#164ec7;--primary-soft:#eaf2ff;
      --accent:#18b981;--accent-soft:#e8f8f1;--warning:#f59e0b;--danger:#e5484d;
      --ink:#122033;--text:#334155;--muted:#64748b;--line:#dbe5f2;
      --bg:#f7fbff;--paper:#fff;--soft:#f1f7ff;--dark:#10233d;--dark-2:#173454;
      --radius-sm:10px;--radius:16px;--radius-lg:22px;
      --shadow:0 14px 36px rgba(36,82,140,.12);--shadow-hover:0 18px 46px rgba(33,104,243,.17);
      --container:1220px
    }
    *,*::before,*::after{box-sizing:border-box}
    html{scroll-behavior:smooth;scroll-padding-top:138px}
    body{margin:0;font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.78;font-size:16px;overflow-x:hidden}
    a{color:inherit;text-decoration:none;transition:.2s ease}
    img{display:block;max-width:100%;object-fit:cover}
    button,input,select,textarea{font:inherit}
    a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.accordion-button:focus-visible{outline:3px solid rgba(33,104,243,.28);outline-offset:3px;box-shadow:none}
    .site-container{width:min(calc(100% - 32px),var(--container));margin:auto}
    .section{padding:88px 0;position:relative}.section-soft{background:var(--soft)}
    .section-head{max-width:760px;margin-bottom:34px}.section-kicker{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:var(--primary-soft);color:var(--primary-dark);font-size:13px;font-weight:800;margin-bottom:13px}.section-kicker:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
    h1,h2,h3,h4{color:var(--ink);font-weight:850;line-height:1.25;margin:0}h1{font-size:clamp(34px,5vw,56px)}h2{font-size:clamp(28px,3vw,40px)}h3{font-size:20px}
    .lead{font-size:17px;color:var(--muted);line-height:1.9;margin:16px 0 0}.muted{color:var(--muted)}
    .btn{min-height:46px;border-radius:12px;padding:10px 20px;font-weight:750;border-width:1px}.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 10px 20px rgba(33,104,243,.2)}.btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-hover)}.btn-outline-primary{color:var(--primary-dark);border-color:rgba(33,104,243,.3);background:#fff}.btn-outline-primary:hover{background:var(--primary-soft);color:var(--primary-dark);border-color:var(--primary)}
    .tag{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--muted);font-size:13px;font-weight:700;white-space:nowrap}.tag.live{color:#087a55;background:var(--accent-soft);border-color:#b8ead7}.tag.warn{color:#946000;background:#fff6df;border-color:#f5d99a}
    .site-header{position:sticky;top:0;z-index:1030;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);box-shadow:0 8px 26px rgba(15,35,65,.05)}.topbar{border-bottom:1px solid var(--line)}.topbar-inner,.navline-inner{display:flex;align-items:center;justify-content:space-between;gap:22px}.topbar-inner{min-height:70px}.brand{display:flex;align-items:center;gap:12px;color:var(--ink);font-size:20px;font-weight:900;min-height:48px}.brand-mark{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--primary),#4fb4ff);color:#fff;display:grid;place-items:center;font-size:19px;box-shadow:0 10px 20px rgba(33,104,243,.2)}.top-note{font-size:14px;color:var(--muted);margin-left:auto}.search-box{width:250px;height:42px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--muted)}.search-box input{border:0;outline:0;width:100%;min-width:0;color:var(--text);background:transparent}.menu-toggle{display:none;width:46px;height:46px;border:1px solid var(--line);border-radius:12px;background:#fff}.menu-toggle span{display:block;width:20px;height:2px;background:var(--ink);margin:5px auto}.navline-inner{min-height:56px}.main-nav{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.main-nav a{min-height:44px;padding:9px 14px;border-radius:10px;color:var(--muted);font-weight:700;font-size:14px}.main-nav a:hover,.main-nav a.active{color:var(--primary-dark);background:var(--primary-soft)}
    .page-band{padding:64px 0 58px;background:linear-gradient(135deg,#eef5ff 0%,#fff 72%);border-bottom:1px solid var(--line)}.crumbs{display:flex;gap:9px;align-items:center;color:var(--muted);font-size:14px;margin-bottom:22px}.crumbs a:hover{color:var(--primary)}
    .overview-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:stretch}.overview-card,.summary-panel,.data-panel,.explain-card,.news-card,.support-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
    .overview-card{padding:28px;display:grid;grid-template-columns:1fr 190px;gap:25px}.overview-card img{width:190px;height:150px;border-radius:14px}.summary-panel{padding:24px;display:flex;flex-direction:column;justify-content:center}.summary-row{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line)}.summary-row:last-child{border:0}.summary-row strong{color:var(--ink)}
    .data-layout{display:grid;grid-template-columns:220px 1fr;gap:22px}.filter-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;height:max-content;position:sticky;top:150px}.filter-box label{display:block;font-size:13px;font-weight:800;color:var(--muted);margin:16px 0 7px}.form-select,.form-control{border:1px solid var(--line);border-radius:10px;min-height:44px;color:var(--text)}.form-select:focus,.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(33,104,243,.1)}.data-panel{overflow:hidden}.panel-title{padding:21px 24px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.match-row{display:grid;grid-template-columns:105px 1fr 100px 120px;align-items:center;gap:18px;padding:19px 24px;border-bottom:1px solid #edf2f8;transition:.2s}.match-row:hover{background:var(--primary-soft)}.match-date{font-size:13px;color:var(--muted)}.teams{font-weight:800;color:var(--ink)}.teams small{display:block;font-weight:500;color:var(--muted);margin-top:4px}.score{font-size:21px;font-weight:900;color:var(--ink);text-align:center}.more-line{padding:20px 24px;text-align:right}.more-line a{color:var(--primary-dark);font-weight:800}
    .explain-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.explain-card{padding:28px}.field-list{display:grid;gap:12px;margin-top:19px}.field-item{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}.field-item b{color:var(--primary-dark);min-width:88px}
    .support-strip{display:flex;gap:16px;overflow:auto;padding:4px 2px 16px}.support-card{min-width:230px;padding:20px}.support-card:hover,.news-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}.support-card strong{display:block;color:var(--ink);font-size:18px;margin:12px 0 4px}
    .news-layout{display:grid;grid-template-columns:1fr 1fr;gap:18px}.news-card{padding:21px;display:flex;gap:16px;align-items:flex-start;transition:.2s}.news-date{font-size:13px;color:var(--primary);font-weight:800;min-width:70px}.news-card h3{font-size:17px}.news-card p{margin:7px 0 0;color:var(--muted);font-size:14px}
    .accordion{display:grid;gap:12px}.accordion-item{border:1px solid var(--line)!important;border-radius:14px!important;overflow:hidden;background:#fff}.accordion-button{font-weight:800;color:var(--ink);padding:19px 22px;background:#fff}.accordion-button:not(.collapsed){color:var(--primary-dark);background:var(--primary-soft);box-shadow:none}.accordion-body{padding:0 22px 20px;color:var(--muted)}
    .cta-box{background:var(--primary);border-radius:var(--radius-lg);padding:40px;color:#fff;display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}.cta-box h2{color:#fff}.cta-box .lead{color:#dbe9ff}.cta-box .form-control,.cta-box .form-select{background:#fff;border:0}.site-footer{background:var(--dark);color:#b9c8db;padding:58px 0 22px}.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:42px}.footer-brand{font-size:21px;color:#fff;font-weight:900;margin-bottom:12px}.footer-title{color:#fff;font-weight:800;margin-bottom:13px}.footer-links{display:grid;gap:7px;font-size:14px}.copyright{border-top:1px solid rgba(255,255,255,.14);margin-top:38px;padding-top:18px;display:flex;justify-content:space-between;font-size:13px}
    @media(max-width:992px){.top-note{display:none}.search-box{width:210px}.data-layout{grid-template-columns:1fr}.filter-box{position:static}.overview-grid,.explain-grid,.cta-box{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}}
    @media(max-width:768px){.topbar-inner{min-height:62px}.search-box{display:none}.menu-toggle{display:block}.navline{display:none}.navline.open{display:block}.navline-inner{align-items:stretch}.main-nav{display:grid;grid-template-columns:1fr 1fr;padding:10px 0 15px}.main-nav a{padding:10px}.overview-card{grid-template-columns:1fr}.overview-card img{width:100%;height:190px}.match-row{grid-template-columns:82px 1fr 70px;gap:10px;padding:16px}.match-row .status{grid-column:2 / 4}.news-layout{grid-template-columns:1fr}.section{padding:64px 0}.page-band{padding:44px 0}.cta-box{padding:28px 22px}}
    @media(max-width:520px){.site-container{width:min(calc(100% - 24px),var(--container))}.brand{font-size:17px}.brand-mark{width:38px;height:38px}.panel-title{padding:18px}.match-row{grid-template-columns:1fr 72px}.match-date{grid-column:1/3}.teams{grid-column:1}.score{grid-column:2;grid-row:2}.match-row .status{grid-column:1/3}.footer-grid{grid-template-columns:1fr}.copyright{display:grid;gap:6px}.main-nav{grid-template-columns:1fr}.btn{width:100%}}

/* roulang page: category4 */
:root{--primary:#2168f3;--primary-dark:#164ec7;--primary-soft:#eaf2ff;--accent:#18b981;--accent-soft:#e8f8f1;--warning:#f59e0b;--danger:#e5484d;--ink:#122033;--text:#334155;--muted:#64748b;--line:#dbe5f2;--bg:#f7fbff;--paper:#fff;--soft:#f1f7ff;--dark:#10233d;--dark-2:#173454;--radius-sm:10px;--radius:16px;--radius-lg:22px;--shadow:0 14px 36px rgba(36,82,140,.12);--shadow-hover:0 18px 46px rgba(33,104,243,.17);--container:1220px}
        *{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:138px}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.78 "PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none;transition:.2s ease}img{max-width:100%;display:block}button,input,select,textarea{font:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(33,104,243,.28);outline-offset:3px}.site-container{width:min(calc(100% - 32px),var(--container));margin:auto}.section{padding:92px 0}.section-soft{background:var(--soft)}.section-head{max-width:780px;margin-bottom:34px}.section-kicker{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:var(--primary-soft);color:var(--primary-dark);font-size:13px;font-weight:700;margin-bottom:13px}.section-kicker:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}h1,h2,h3,h4{color:var(--ink);font-weight:850;line-height:1.25;margin:0}h1{font-size:clamp(34px,4.6vw,56px)}h2{font-size:clamp(28px,3.2vw,40px)}h3{font-size:20px}.lead{color:var(--muted);font-size:17px;line-height:1.9;margin-top:16px}.btn{min-height:46px;border-radius:12px;padding:10px 20px;font-weight:700;border:1px solid transparent;transition:.2s ease}.btn-primary{background:var(--primary);color:#fff;box-shadow:0 10px 20px rgba(33,104,243,.2)}.btn-primary:hover{background:var(--primary-dark);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-hover)}.btn-outline-primary{background:#fff;color:var(--primary-dark);border-color:#b9d0fa}.btn-outline-primary:hover{background:var(--primary-soft);color:var(--primary-dark);transform:translateY(-2px)}.tag{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--muted);font-size:13px;font-weight:700}.tag.live{color:#087a55;background:var(--accent-soft);border-color:#bdebd8}.tag.warn{color:#986000;background:#fff6df;border-color:#f6ddb0}
        .site-header{position:sticky;top:0;z-index:1030;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);box-shadow:0 10px 30px rgba(15,35,65,.05)}.topbar{border-bottom:1px solid var(--line)}.topbar-inner,.navline-inner{display:flex;align-items:center;justify-content:space-between;gap:22px}.topbar-inner{min-height:70px}.brand{display:inline-flex;align-items:center;gap:12px;font-size:20px;font-weight:900;color:var(--ink);min-height:48px}.brand-mark{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--primary),#4fb4ff);color:#fff;display:grid;place-items:center;font-weight:900;box-shadow:0 12px 24px rgba(33,104,243,.22)}.top-note{font-size:14px;color:var(--muted)}.top-note strong{color:var(--accent)}.search-box{width:250px;height:42px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--muted)}.search-box input{width:100%;min-width:0;border:0;outline:0;color:var(--text);background:transparent}.menu-toggle{display:none;width:46px;height:46px;border:1px solid var(--line);border-radius:12px;background:#fff}.menu-toggle span{display:block;width:20px;height:2px;margin:5px auto;background:var(--ink)}.navline-inner{min-height:56px}.main-nav{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.main-nav a{min-height:44px;padding:9px 14px;border-radius:10px;color:var(--muted);font-size:14px;font-weight:700}.main-nav a:hover,.main-nav a.active{color:var(--primary-dark);background:var(--primary-soft)}
        .page-banner{padding:64px 0 58px;background:linear-gradient(110deg,#edf5ff 0%,#fff 68%);border-bottom:1px solid var(--line)}.crumbs{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:14px;margin-bottom:20px}.crumbs a{color:var(--primary-dark)}.banner-row{display:flex;align-items:end;justify-content:space-between;gap:40px}.banner-copy{max-width:790px}.banner-copy .lead{max-width:720px}.banner-mark{width:145px;height:145px;border-radius:28px;overflow:hidden;box-shadow:var(--shadow);border:7px solid #fff}.banner-mark img{width:100%;height:100%;object-fit:cover}
        .data-strip{margin-top:-28px;position:relative;z-index:2}.strip-card{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}.strip-item{padding:22px 25px;border-right:1px solid var(--line)}.strip-item:last-child{border-right:0}.strip-item small{display:block;color:var(--muted);font-size:13px}.strip-item strong{display:block;color:var(--ink);font-size:26px;line-height:1.3;margin-top:4px}
        .filter-layout{display:grid;grid-template-columns:245px 1fr;gap:26px}.filter-panel,.games-panel,.explain-card,.team-card,.news-box,.faq-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.filter-panel{padding:22px;height:max-content;position:sticky;top:145px}.filter-panel h3{font-size:18px;margin-bottom:18px}.filter-group{padding:16px 0;border-top:1px solid var(--line)}.filter-group:first-of-type{border-top:0}.filter-group label{display:block;font-size:13px;font-weight:700;color:var(--muted);margin-bottom:8px}.form-select,.form-control{border:1px solid var(--line);border-radius:10px;min-height:44px;color:var(--text)}.form-select:focus,.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(33,104,243,.1)}.games-panel{padding:24px}.panel-top{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:18px}.panel-top p{margin:0;color:var(--muted);font-size:14px}.game-list{display:grid;gap:12px}.game-row{display:grid;grid-template-columns:115px 1fr 110px 105px;align-items:center;gap:18px;padding:18px 16px;border:1px solid var(--line);border-radius:14px;background:#fbfdff;transition:.2s ease}.game-row:hover{border-color:#a9c5f8;box-shadow:0 8px 22px rgba(36,82,140,.09);transform:translateY(-2px)}.game-time{font-size:13px;color:var(--muted)}.game-time strong{display:block;color:var(--ink);font-size:16px}.match-name{font-weight:800;color:var(--ink)}.match-name span{display:block;color:var(--muted);font-size:13px;font-weight:500}.score{text-align:center;font-size:21px;font-weight:900;color:var(--ink)}.score em{font-style:normal;color:var(--muted);font-size:14px}.update{text-align:right;color:var(--muted);font-size:12px}.more-row{text-align:center;margin-top:22px}
        .explain-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:38px;align-items:center}.explain-image{height:330px;border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}.explain-image img{width:100%;height:100%;object-fit:cover}.metric-list{display:grid;gap:12px;margin-top:24px}.metric-line{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:12px}.metric-line b{color:var(--ink)}.metric-line span{color:var(--muted);font-size:14px}.support-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:24px}.team-card{padding:24px}.team-card img{height:180px;width:100%;object-fit:cover;border-radius:14px;margin-bottom:18px}.team-row{display:flex;justify-content:space-between;gap:15px;padding:13px 0;border-bottom:1px solid var(--line)}.team-row:last-child{border-bottom:0}.team-row strong{color:var(--ink)}.team-row span{color:var(--muted);font-size:14px}.news-box{padding:25px}.news-list{display:grid;gap:0}.news-item{display:flex;justify-content:space-between;gap:20px;padding:17px 0;border-bottom:1px solid var(--line)}.news-item:last-child{border-bottom:0}.news-item strong{color:var(--ink)}.news-item strong:hover{color:var(--primary)}.news-item small{color:var(--muted);white-space:nowrap}.faq-box{overflow:hidden}.accordion-item{border:0;border-bottom:1px solid var(--line)}.accordion-item:last-child{border-bottom:0}.accordion-button{padding:20px 24px;background:#fff;color:var(--ink);font-weight:800;box-shadow:none!important}.accordion-button:not(.collapsed){background:var(--primary-soft);color:var(--primary-dark)}.accordion-body{padding:0 24px 20px;color:var(--muted);background:var(--primary-soft)}.cta-section{padding:68px 0;background:var(--primary);color:#fff}.cta-grid{display:flex;align-items:center;justify-content:space-between;gap:30px}.cta-section h2{color:#fff}.cta-section p{margin:12px 0 0;color:#dbe9ff}.cta-section .btn{background:#fff;color:var(--primary-dark);border-color:#fff}.site-footer{padding:60px 0 24px;background:var(--dark);color:#b9c8db}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:45px}.footer-brand{font-size:21px;font-weight:900;color:#fff;margin-bottom:12px}.footer-title{font-weight:800;color:#fff;margin-bottom:12px}.footer-links{display:grid;gap:7px;font-size:14px}.copyright{display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.14);margin-top:40px;padding-top:20px;font-size:13px;color:#8fa4bd}
        @media(max-width:991px){.search-box{width:190px}.filter-layout{grid-template-columns:1fr}.filter-panel{position:static}.explain-grid,.support-grid{grid-template-columns:1fr}.game-row{grid-template-columns:100px 1fr 95px}.update{display:none}}
        @media(max-width:767px){.topbar-inner{min-height:64px}.top-note,.search-box{display:none}.menu-toggle{display:block}.navline{display:none}.navline.open{display:block}.navline-inner{display:block;padding:10px 0}.main-nav{display:grid;grid-template-columns:1fr 1fr}.main-nav a{padding:10px}.banner-row{align-items:start}.banner-mark{display:none}.page-banner{padding:45px 0 48px}.section{padding:64px 0}.strip-card{grid-template-columns:1fr 1fr}.strip-item{border-bottom:1px solid var(--line)}.strip-item:nth-child(2){border-right:0}.game-row{grid-template-columns:1fr auto;gap:8px}.game-time{grid-column:1/-1}.score{grid-column:2;grid-row:2}.match-name{grid-column:1;grid-row:2}.update{display:block;grid-column:1/-1;text-align:left}.cta-grid{display:block}.cta-grid .btn{margin-top:22px}.footer-grid{grid-template-columns:1fr;gap:25px}.copyright{display:block}.copyright span{display:block;margin-top:5px}}
        @media(max-width:520px){.site-container{width:min(100% - 24px,var(--container))}.brand{font-size:17px}.brand-mark{width:38px;height:38px}.main-nav{grid-template-columns:1fr}.strip-item{padding:16px}.strip-item strong{font-size:22px}.games-panel,.news-box,.team-card{padding:17px}.explain-image{height:230px}.banner-copy .lead{font-size:15px}}

/* roulang page: category3 */
:root {
  --primary: #2168f3;
  --primary-dark: #164ec7;
  --primary-soft: #eaf2ff;
  --accent: #18b981;
  --accent-soft: #e8f8f1;
  --warning: #f59e0b;
  --danger: #e5484d;
  --ink: #122033;
  --text: #334155;
  --muted: #64748b;
  --line: #dbe5f2;
  --bg: #f7fbff;
  --paper: #ffffff;
  --soft: #f1f7ff;
  --dark: #10233d;
  --dark-2: #173454;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --shadow: 0 14px 36px rgba(36, 82, 140, .12);
  --shadow-hover: 0 18px 46px rgba(33, 104, 243, .17);
  --container: 1220px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 140px; }
body {
  margin: 0;
  font-family: "PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.78;
  font-size: 16px;
  overflow-x: hidden;
}
a {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
img { max-width: 100%; display: block; }
button,input,select,textarea { font: inherit; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.accordion-button:focus-visible {
  outline: 3px solid rgba(33,104,243,.28);
  outline-offset: 3px;
  box-shadow: none;
}
.site-container { width: min(100% - 32px, var(--container)); margin-inline: auto; }
.section { padding: 88px 0; position: relative; }
.section-soft { background: var(--soft); }
.section-head { max-width: 740px; margin-bottom: 34px; }
.section-kicker {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px;
  border-radius: 999px; background: var(--primary-soft); color: var(--primary-dark);
  font-size: 13px; font-weight: 800; margin-bottom: 14px;
}
.section-kicker::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}
.section-title { margin: 0; color: var(--ink); font-size: clamp(28px,3vw,40px); line-height: 1.28; font-weight: 900; letter-spacing: -.03em; }
.lead { margin: 15px 0 0; color: var(--muted); font-size: 16px; line-height: 1.9; }
.btn {
  min-height: 46px; padding: 10px 20px; border-radius: 12px; font-weight: 800;
  border-width: 1px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-primary {
  background: var(--primary); border-color: var(--primary); color: #fff;
  box-shadow: 0 10px 20px rgba(33,104,243,.2);
}
.btn-primary:hover,.btn-primary:active {
  background: var(--primary-dark)!important; border-color: var(--primary-dark)!important;
  transform: translateY(-2px); box-shadow: var(--shadow-hover);
}
.btn-outline-primary { color: var(--primary-dark); background: #fff; border-color: rgba(33,104,243,.3); }
.btn-outline-primary:hover,.btn-outline-primary:active {
  color: var(--primary-dark)!important; background: var(--primary-soft)!important;
  border-color: var(--primary)!important; transform: translateY(-2px);
}
.tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px;
  background: #fff; color: var(--muted); border: 1px solid var(--line); font-size: 12px; font-weight: 800; white-space: nowrap;
}
.tag.live { color: #087a55; background: var(--accent-soft); border-color: rgba(24,185,129,.25); }
.tag.warn { color: #965a00; background: #fff6df; border-color: rgba(245,158,11,.25); }
.tag.blue { color: var(--primary-dark); background: var(--primary-soft); border-color: rgba(33,104,243,.18); }

.site-header {
  position: sticky; top: 0; z-index: 1030; background: rgba(255,255,255,.97);
  backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid rgba(219,229,242,.85);
  box-shadow: 0 10px 30px rgba(15,35,65,.05);
}
.topbar { border-bottom: 1px solid var(--line); }
.topbar-inner,.navline-inner { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.topbar-inner { min-height: 70px; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 900; color: var(--ink); font-size: 20px; min-height: 48px; white-space: nowrap; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 14px; background: linear-gradient(135deg,var(--primary),#4fb4ff);
  color: #fff; display: grid; place-items: center; box-shadow: 0 12px 24px rgba(33,104,243,.22); position: relative; overflow: hidden;
}
.brand-mark::before { content: "⚽"; font-size: 20px; position: relative; z-index: 1; }
.brand-mark::after {
  content: ""; width: 18px; height: 18px; border: 3px solid rgba(255,255,255,.9);
  border-radius: 50%; position: absolute; right: -3px; bottom: -3px;
}
.header-meta { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.update-note { color: var(--muted); font-size: 13px; white-space: nowrap; }
.update-note strong { color: var(--accent); }
.search-box {
  display: flex; align-items: center; gap: 8px; width: 250px; height: 42px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--muted);
}
.search-box input { border: 0; outline: 0; min-width: 0; width: 100%; color: var(--text); background: transparent; font-size: 14px; }
.search-box input::placeholder,.form-control::placeholder,textarea::placeholder { color: #94a3b8; }
.menu-toggle {
  display: none; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 12px;
  background: #fff; color: var(--ink);
}
.menu-toggle span { display: block; width: 20px; height: 2px; margin: 5px auto; background: currentColor; border-radius: 2px; }
.navline-inner { min-height: 56px; }
.main-nav { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.main-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px;
  font-size: 14px; font-weight: 700; color: #526177; position: relative;
}
.main-nav a:hover { background: var(--primary-soft); color: var(--primary-dark); }
.main-nav a.active { color: var(--primary-dark); background: var(--primary-soft); }
.main-nav a.active::after {
  content: ""; position: absolute; height: 3px; left: 14px; right: 14px; bottom: -1px; background: var(--primary); border-radius: 4px 4px 0 0;
}

.page-banner {
  overflow: hidden; background: var(--paper); border-bottom: 1px solid var(--line); position: relative;
}
.page-banner::before {
  content: ""; position: absolute; inset: 0 0 0 48%; background:
  linear-gradient(90deg,rgba(247,251,255,.96) 0%,rgba(247,251,255,.75) 35%,rgba(16,35,61,.16) 100%),
  url('/assets/images/backpic/back-3.webp') center/cover no-repeat;
}
.banner-inner { min-height: 330px; padding: 52px 0 48px; position: relative; display: flex; align-items: center; }
.breadcrumb {
  margin: 0 0 20px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 14px;
}
.breadcrumb a { color: var(--primary-dark); font-weight: 700; }
.breadcrumb li+li::before { content: "/"; margin-right: 8px; color: #a4b2c5; }
.page-banner h1 {
  max-width: 720px; margin: 0; color: var(--ink); font-size: clamp(34px,4.2vw,54px);
  line-height: 1.18; letter-spacing: -.045em; font-weight: 900;
}
.page-banner p { max-width: 670px; margin: 18px 0 0; color: #526177; font-size: 17px; line-height: 1.9; }
.banner-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

.overview-strip {
  margin-top: -38px; position: relative; z-index: 2; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 22px 26px; box-shadow: var(--shadow);
}
.overview-item { padding: 3px 22px; border-right: 1px solid var(--line); }
.overview-item:last-child { border-right: 0; }
.overview-label { color: var(--muted); font-size: 13px; font-weight: 700; }
.overview-value { display: block; color: var(--ink); font-weight: 900; font-size: 21px; margin-top: 2px; }
.overview-value small { font-size: 13px; color: var(--accent); margin-left: 5px; }

.data-layout { display: grid; grid-template-columns: 230px minmax(0,1fr); gap: 28px; align-items: start; }
.filter-panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: 0 8px 22px rgba(36,82,140,.07); position: sticky; top: 150px;
}
.filter-title { color: var(--ink); font-weight: 900; margin-bottom: 14px; font-size: 16px; }
.filter-group { padding: 16px 0; border-top: 1px solid #e9eff7; }
.filter-group:first-of-type { border-top: 0; padding-top: 0; }
.filter-group label { display: block; color: #475569; font-size: 13px; font-weight: 800; margin-bottom: 9px; }
.form-select,.form-control {
  border: 1px solid var(--line); border-radius: 10px; min-height: 42px; color: var(--text); background-color: #fff;
}
.form-select:focus,.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 .22rem rgba(33,104,243,.12); }
.filter-check { display: flex; align-items: center; gap: 9px; margin: 10px 0; font-size: 14px; color: #526177; cursor: pointer; }
.filter-check input { width: 17px; height: 17px; accent-color: var(--primary); }
.match-board { display: flex; flex-direction: column; gap: 15px; }
.board-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 3px; }
.board-top h2 { color: var(--ink); font-size: 22px; margin: 0; font-weight: 900; }
.data-date { font-size: 13px; color: var(--muted); }
.match-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 7px 20px rgba(36,82,140,.065); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.match-card:hover { transform: translateY(-3px); border-color: rgba(33,104,243,.38); box-shadow: var(--shadow); }
.match-league {
  padding: 11px 18px; background: #f8fbff; border-bottom: 1px solid #e7eef8; display: flex; justify-content: space-between; gap: 12px; align-items: center;
  color: #526177; font-size: 13px; font-weight: 800;
}
.match-main { display: grid; grid-template-columns: 110px minmax(0,1fr) 100px minmax(0,1fr) 170px; align-items: center; min-height: 94px; padding: 14px 18px; gap: 14px; }
.match-time { color: var(--ink); font-size: 15px; font-weight: 900; }
.match-time small { display: block; color: var(--muted); font-size: 13px; }
.match-team { color: var(--ink); font-size: 17px; font-weight: 900; }
.match-team.away { text-align: right; }
.match-score { text-align: center; color: var(--primary-dark); font-size: 25px; font-weight: 900; letter-spacing: .04em; }
.match-score small { display: block; font-size: 11px; color: var(--muted); font-weight: 700; letter-spacing: 0; }
.match-stats { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }

.explain-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 34px; align-items: center; }
.explain-image { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); min-height: 340px; }
.explain-image img { width: 100%; height: 100%; object-fit: cover; }
.explain-copy { padding: 10px 0; }
.explain-copy h2 { color: var(--ink); font-weight: 900; font-size: 32px; line-height: 1.3; margin: 0 0 15px; }
.field-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-list li { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; color: #526177; font-size: 14px; }
.field-list strong { display: block; color: var(--ink); font-size: 15px; margin-bottom: 3px; }

.support-row { display: flex; gap: 18px; overflow-x: auto; padding: 5px 3px 14px; scrollbar-width: thin; }
.support-card {
  min-width: 245px; flex: 1; padding: 20px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 8px 22px rgba(36,82,140,.07); transition: transform .2s ease, box-shadow .2s ease;
}
.support-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.support-card h3 { color: var(--ink); font-size: 18px; margin: 16px 0 7px; font-weight: 900; }
.support-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75; }
.support-icon { width: 44px; height: 44px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-dark); border-radius: 13px; font-size: 20px; }

.news-panel { display: grid; grid-template-columns: .85fr 1.15fr; gap: 24px; align-items: stretch; }
.feature-news { min-height: 300px; border-radius: var(--radius-lg); overflow: hidden; position: relative; color: #fff; background: var(--dark); }
.feature-news img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; opacity: .72; }
.feature-news::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent,rgba(16,35,61,.95)); }
.feature-news-copy { position: absolute; z-index: 1; left: 25px; right: 25px; bottom: 22px; }
.feature-news-copy h3 { margin: 11px 0 0; font-size: 23px; line-height: 1.4; font-weight: 900; }
.news-list { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 8px 24px; }
.news-item { display: flex; align-items: center; gap: 18px; padding: 18px 0; border-bottom: 1px solid #eaf0f7; }
.news-item:last-child { border-bottom: 0; }
.news-date { color: var(--primary-dark); font-size: 13px; font-weight: 900; min-width: 72px; }
.news-item h3 { color: var(--ink); margin: 0; font-size: 16px; font-weight: 800; }
.news-item p { color: var(--muted); margin: 4px 0 0; font-size: 13px; }

.faq-wrap { max-width: 900px; }
.accordion-item { border: 1px solid var(--line)!important; border-radius: 13px!important; overflow: hidden; margin-bottom: 12px; background: #fff; }
.accordion-button { color: var(--ink); background: #fff; font-weight: 900; padding: 18px 20px; box-shadow: none!important; }
.accordion-button:not(.collapsed) { color: var(--primary-dark); background: var(--primary-soft); }
.accordion-button::after { background-size: 14px; }
.accordion-body { color: var(--muted); padding: 0 20px 18px; font-size: 14px; line-height: 1.85; }

.cta-band { background: var(--primary-soft); padding: 38px 0; border-top: 1px solid #d8e7ff; border-bottom: 1px solid #d8e7ff; }
.cta-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.cta-band h2 { margin: 0; color: var(--ink); font-size: 28px; font-weight: 900; }
.cta-band p { margin: 7px 0 0; color: var(--muted); }
.site-footer { background: var(--dark); color: #b8c7da; padding: 62px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; padding-bottom: 38px; }
.footer-brand { color: #fff; font-size: 22px; font-weight: 900; margin-bottom: 13px; }
.footer-grid p { margin: 0; max-width: 410px; font-size: 14px; line-height: 1.9; }
.footer-title { color: #fff; font-size: 15px; font-weight: 900; margin-bottom: 14px; }
.footer-links { display: grid; gap: 8px; font-size: 14px; line-height: 1.7; }
.copyright { display: flex; justify-content: space-between; gap: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; color: #8fa4bd; }

@media (max-width: 1100px) {
  .header-meta { gap: 8px; }
  .update-note { display: none; }
  .main-nav a { padding-inline: 9px; }
  .match-main { grid-template-columns: 88px minmax(0,1fr) 85px minmax(0,1fr) 135px; gap: 9px; }
}
@media (max-width: 991px) {
  .topbar-inner { min-height: 64px; }
  .menu-toggle { display: block; }
  .search-box { width: 210px; }
  .navline { display: none; }
  .navline.open { display: block; }
  .navline-inner { padding: 10px 0 14px; align-items: stretch; }
  .main-nav { display: grid; grid-template-columns: repeat(2,1fr); }
  .main-nav a { justify-content: center; border: 1px solid transparent; }
  .main-nav a.active::after { display: none; }
  .section { padding: 70px 0; }
  .data-layout,.explain-grid,.news-panel { grid-template-columns: 1fr; }
  .filter-panel { position: static; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
  .filter-title { grid-column: 1/-1; margin-bottom: 0; }
  .filter-group { border-top: 0; padding: 0; }
}
@media (max-width: 767px) {
  .site-container { width: min(100% - 28px, var(--container)); }
  .header-meta { margin-left: auto; }
  .search-box { display: none; }
  .brand { font-size: 17px; gap: 8px; }
  .brand-mark { width: 38px; height: 38px; border-radius: 12px; }
  .banner-inner { min-height: 390px; padding: 44px 0; }
  .page-banner::before { inset: 0; background: linear-gradient(90deg,rgba(247,251,255,.96),rgba(247,251,255,.78)),url('/assets/images/backpic/back-3.webp') center/cover; }
  .page-banner h1 { font-size: 36px; }
  .page-banner p { font-size: 15px; }
  .overview-strip { margin-top: -24px; padding: 15px; }
  .overview-item { padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .overview-item:last-child { border-bottom: 0; }
  .overview-value { font-size: 19px; }
  .filter-panel { grid-template-columns: 1fr; }
  .match-main { grid-template-columns: 1fr 80px 1fr; gap: 8px; padding: 17px 14px; }
  .match-time { grid-column: 1/-1; }
  .match-team { font-size: 15px; }
  .match-team.away { text-align: left; }
  .match-stats { grid-column: 1/-1; justify-content: flex-start; }
  .field-list { grid-template-columns: 1fr; }
  .explain-image { min-height: 250px; }
  .news-item { align-items: flex-start; flex-direction: column; gap: 3px; padding: 15px 0; }
  .cta-band-inner { align-items: flex-start; flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .copyright { flex-direction: column; gap: 6px; }
}
@media (max-width: 520px) {
  .section { padding: 58px 0; }
  .section-title { font-size: 28px; }
  .page-banner h1 { font-size: 31px; }
  .banner-tags { gap: 7px; }
  .overview-value { font-size: 18px; }
  .match-league { align-items: flex-start; flex-direction: column; gap: 4px; }
  .board-top { align-items: flex-start; flex-direction: column; }
  .support-card { min-width: 225px; }
  .feature-news-copy h3 { font-size: 19px; }
  .cta-band h2 { font-size: 24px; }
}

/* roulang page: category6 */
:root{
--primary:#2168f3;--primary-dark:#164ec7;--primary-soft:#eaf2ff;--accent:#18b981;--accent-soft:#e8f8f1;
--warning:#f59e0b;--danger:#e5484d;--ink:#122033;--text:#334155;--muted:#64748b;--line:#dbe5f2;
--bg:#f7fbff;--paper:#fff;--soft:#f1f7ff;--dark:#10233d;--dark-2:#173454;
--radius-sm:10px;--radius:16px;--radius-lg:22px;--shadow:0 14px 36px rgba(36,82,140,.12);
--shadow-hover:0 18px 46px rgba(33,104,243,.17);--container:1220px
}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:138px}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.78 "PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;overflow-x:hidden}
a{text-decoration:none;color:inherit;transition:.2s ease}img{display:block;max-width:100%}
button,input,select,textarea{font:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.accordion-button:focus-visible{outline:3px solid rgba(33,104,243,.28);outline-offset:3px;box-shadow:none}
.site-container{width:min(calc(100% - 32px),var(--container));margin:auto}.section{padding:92px 0}.section-soft{background:var(--soft)}
.section-head{max-width:760px;margin-bottom:34px}.section-kicker{display:inline-flex;gap:8px;align-items:center;padding:6px 12px;border-radius:999px;background:var(--primary-soft);color:var(--primary-dark);font-size:13px;font-weight:700;margin-bottom:13px}
.section-kicker:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
h1,h2,h3,h4{color:var(--ink);font-weight:800;line-height:1.28;margin:0}h1{font-size:clamp(34px,5vw,56px)}h2{font-size:clamp(28px,3vw,40px)}h3{font-size:20px}.lead{color:var(--muted);font-size:17px;line-height:1.9;margin-top:16px}
.btn{min-height:46px;border-radius:12px;padding:10px 20px;font-weight:700;border:1px solid transparent}.btn-primary{background:var(--primary);color:#fff;box-shadow:0 10px 20px rgba(33,104,243,.2)}.btn-primary:hover{background:var(--primary-dark);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.btn-outline-primary{border-color:rgba(33,104,243,.3);background:#fff;color:var(--primary-dark)}.btn-outline-primary:hover{background:var(--primary-soft);color:var(--primary-dark);transform:translateY(-2px)}
.tag{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--muted);font-size:13px;font-weight:700}.tag.live{background:var(--accent-soft);border-color:#bcebd9;color:#087a55}.tag.warn{background:#fff6df;border-color:#f8d993;color:#9a5b00}
.site-header{position:sticky;top:0;z-index:1030;background:rgba(255,255,255,.97);border-bottom:1px solid rgba(219,229,242,.8);box-shadow:0 10px 30px rgba(15,35,65,.05)}
.topbar{border-bottom:1px solid var(--line)}.topbar-inner,.navline-inner{display:flex;align-items:center;justify-content:space-between;gap:22px}.topbar-inner{min-height:70px}.brand{display:flex;align-items:center;gap:12px;color:var(--ink);font-size:20px;font-weight:900;min-height:48px}
.brand-mark{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--primary),#4fb4ff);color:#fff;display:grid;place-items:center;font-weight:900;box-shadow:0 12px 24px rgba(33,104,243,.22)}
.search-box{display:flex;align-items:center;gap:8px;width:260px;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--muted)}.search-box input{border:0;outline:0;width:100%;min-width:0;color:var(--text)}.search-box input::placeholder{color:#94a3b8}
.menu-toggle{display:none;width:46px;height:46px;border:1px solid var(--line);border-radius:12px;background:#fff}.menu-toggle span{display:block;width:20px;height:2px;margin:5px auto;background:var(--ink)}
.navline-inner{min-height:56px}.main-nav{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.main-nav a{min-height:44px;padding:9px 14px;border-radius:9px;color:var(--muted);font-size:14px;font-weight:700}.main-nav a:hover,.main-nav a.active{background:var(--primary-soft);color:var(--primary-dark)}
.update-note{font-size:13px;color:var(--muted)}.update-note strong{color:var(--accent)}
.page-band{padding:68px 0 58px;background:linear-gradient(110deg,#edf5ff 0%,#fff 65%);border-bottom:1px solid var(--line)}.crumbs{display:flex;gap:9px;color:var(--muted);font-size:14px;margin-bottom:22px}.crumbs a:hover{color:var(--primary)}
.band-content{display:grid;grid-template-columns:1.25fr .75fr;gap:50px;align-items:center}.band-image{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);height:220px}.band-image img{width:100%;height:100%;object-fit:cover}
.data-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.metric{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px;box-shadow:0 8px 24px rgba(36,82,140,.06)}.metric strong{display:block;font-size:28px;color:var(--ink);line-height:1.2}.metric span{color:var(--muted);font-size:14px}
.report-layout{display:grid;grid-template-columns:245px 1fr;gap:26px;align-items:start}.filter-panel,.report-list,.explain-card,.support-card,.news-panel,.faq-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.filter-panel{padding:22px;position:sticky;top:155px}.filter-panel h3{font-size:18px;margin-bottom:18px}.filter-label{display:block;color:var(--muted);font-size:13px;font-weight:700;margin:17px 0 7px}.filter-panel select{border-color:var(--line);border-radius:10px;padding:10px 12px;color:var(--text);background-color:#fff}
.report-list{padding:12px}.report-row{display:grid;grid-template-columns:112px 1fr 130px;gap:20px;align-items:center;padding:22px 18px;border-bottom:1px solid var(--line)}.report-row:last-child{border-bottom:0}.report-date{color:var(--muted);font-size:14px}.report-date strong{display:block;color:var(--ink);font-size:18px}.report-row h3{margin-bottom:6px}.report-row p{margin:0;color:var(--muted);font-size:14px}.report-meta{text-align:right}.report-meta .tag{margin-bottom:8px}.report-link{color:var(--primary-dark);font-size:14px;font-weight:700}.report-link:hover{color:var(--primary)}
.more-line{text-align:center;padding:22px 10px 10px;border-top:1px solid var(--line)}.more-line a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 22px;border:1px solid #bfd3f5;border-radius:11px;color:var(--primary-dark);font-weight:700}.more-line a:hover{background:var(--primary-soft)}
.explain-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.explain-card{padding:28px}.explain-card h3{margin-bottom:12px}.explain-card p{margin:0;color:var(--muted)}.field-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.field-item{padding:12px;border-radius:10px;background:var(--soft);color:var(--primary-dark);font-size:14px;font-weight:700}
.support-row{display:flex;gap:18px;overflow:auto;padding-bottom:8px}.support-card{min-width:245px;padding:21px}.support-card img{height:100px;width:100%;object-fit:cover;border-radius:11px;margin-bottom:16px}.support-card p{color:var(--muted);font-size:14px;margin:8px 0 0}
.news-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.news-panel{padding:24px}.news-item{display:flex;justify-content:space-between;gap:15px;padding:15px 0;border-bottom:1px solid var(--line)}.news-item:last-child{border-bottom:0}.news-item b{font-size:15px;color:var(--ink)}.news-item span{white-space:nowrap;color:var(--muted);font-size:13px}
.accordion-item{border:0;border-bottom:1px solid var(--line)!important}.accordion-button{padding:20px 4px;background:#fff!important;color:var(--ink)!important;font-weight:700;box-shadow:none!important}.accordion-button:after{background-size:14px}.accordion-body{padding:0 4px 20px;color:var(--muted);font-size:15px}.faq-wrap{padding:12px 25px}
.cta-band{background:var(--primary);color:#fff;border-radius:var(--radius-lg);padding:42px 48px;display:flex;align-items:center;justify-content:space-between;gap:30px}.cta-band h2{color:#fff}.cta-band p{margin:10px 0 0;color:#dbeafe}.cta-band .btn{background:#fff;color:var(--primary-dark);border:0}.cta-band .btn:hover{background:#eaf2ff}
.site-footer{background:var(--dark);color:#c7d5e8;padding:58px 0 22px}.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:50px}.footer-brand{color:#fff;font-size:21px;font-weight:900;margin-bottom:14px}.site-footer p{color:#aebfd4;max-width:410px;margin:0}.footer-title{color:#fff;font-weight:800;margin-bottom:14px}.footer-links{display:grid;gap:8px;color:#aebfd4;font-size:14px}.copyright{display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.14);margin-top:38px;padding-top:18px;color:#91a7c0;font-size:13px}
@media(max-width:992px){.search-box{width:210px}.band-content{grid-template-columns:1fr}.band-image{height:190px}.report-layout{grid-template-columns:1fr}.filter-panel{position:static}.report-row{grid-template-columns:95px 1fr 110px}}
@media(max-width:768px){.topbar-inner{min-height:64px}.update-note,.search-box{display:none}.menu-toggle{display:block}.navline{display:none}.site-header.menu-open .navline{display:block}.navline-inner{padding:8px 0}.main-nav{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:5px}.main-nav a{padding:10px}.section{padding:64px 0}.data-strip{grid-template-columns:repeat(2,1fr)}.explain-grid,.news-grid{grid-template-columns:1fr}.cta-band{padding:32px 25px;display:block}.cta-band .btn{margin-top:22px}.footer-grid{grid-template-columns:1fr;gap:28px}}
@media(max-width:520px){.site-container{width:min(100% - 24px,var(--container))}.page-band{padding:48px 0 42px}.band-image{height:150px}.report-row{grid-template-columns:1fr;gap:8px;padding:18px 10px}.report-meta{text-align:left}.report-meta .tag{margin:0 8px 0 0}.field-list{grid-template-columns:1fr}.data-strip{gap:10px}.metric{padding:17px 14px}.metric strong{font-size:23px}.copyright{display:block}.copyright span{display:block;margin-top:6px}}

/* roulang page: category5 */
:root{
      --primary:#2168f3;--primary-dark:#164ec7;--primary-soft:#eaf2ff;
      --accent:#18b981;--accent-soft:#e8f8f1;--warning:#f59e0b;--danger:#e5484d;
      --ink:#122033;--text:#334155;--muted:#64748b;--line:#dbe5f2;
      --bg:#f7fbff;--paper:#fff;--soft:#f1f7ff;--dark:#10233d;--dark-2:#173454;
      --radius-sm:10px;--radius:16px;--radius-lg:22px;
      --shadow:0 14px 36px rgba(36,82,140,.12);--shadow-hover:0 18px 46px rgba(33,104,243,.17);
      --container:1220px
    }
    *,*::before,*::after{box-sizing:border-box}
    html{scroll-behavior:smooth;scroll-padding-top:138px}
    body{margin:0;background:var(--bg);color:var(--text);font:16px/1.78 "PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;overflow-x:hidden}
    a{color:inherit;text-decoration:none;transition:.2s ease}
    img{display:block;max-width:100%;height:auto}
    button,input,select,textarea{font:inherit}
    button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.accordion-button:focus-visible{outline:3px solid rgba(33,104,243,.3);outline-offset:3px;box-shadow:none}
    .site-container{width:min(calc(100% - 32px),var(--container));margin:auto}
    .section{padding:92px 0;position:relative}.section-soft{background:var(--soft)}
    .section-head{max-width:760px;margin-bottom:34px}
    .section-kicker{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:var(--primary-soft);color:var(--primary-dark);font-size:13px;font-weight:700;margin-bottom:13px}
    .section-kicker:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
    h1,h2,h3{color:var(--ink);font-weight:850;line-height:1.25;margin:0 0 14px}
    h1{font-size:clamp(34px,5vw,56px);letter-spacing:-1px}h2{font-size:clamp(28px,3vw,40px)}h3{font-size:20px}
    .lead{color:var(--muted);font-size:17px;line-height:1.9;margin:0}
    .btn{min-height:46px;border-radius:12px;padding:10px 20px;font-weight:750;border-width:1px;transition:.2s ease}
    .btn-primary{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 10px 20px rgba(33,104,243,.2)}
    .btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-hover)}
    .btn-outline-primary{color:var(--primary-dark);border-color:rgba(33,104,243,.3);background:#fff}
    .btn-outline-primary:hover{background:var(--primary-soft);border-color:var(--primary);color:var(--primary-dark);transform:translateY(-2px)}
    .tag{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--muted);font-size:13px;font-weight:700;white-space:nowrap}
    .tag.live{background:var(--accent-soft);border-color:rgba(24,185,129,.25);color:#087a55}.tag.warn{background:#fff6df;border-color:#f8d991;color:#946000}
    .site-header{position:sticky;top:0;z-index:1030;background:rgba(255,255,255,.97);border-bottom:1px solid rgba(219,229,242,.85);box-shadow:0 10px 30px rgba(15,35,65,.05)}
    .topbar{border-bottom:1px solid var(--line)}.topbar-inner,.navline-inner{display:flex;align-items:center;justify-content:space-between;gap:22px}
    .topbar-inner{min-height:70px}.brand{display:inline-flex;align-items:center;gap:12px;min-height:48px;color:var(--ink);font-size:20px;font-weight:900}
    .brand-mark{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--primary),#4fb4ff);color:#fff;display:grid;place-items:center;box-shadow:0 12px 24px rgba(33,104,243,.22);font-weight:900}
    .top-note{color:var(--muted);font-size:14px}.top-note b{color:var(--accent)}
    .search-box{display:flex;align-items:center;gap:8px;width:250px;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--muted)}
    .search-box input{width:100%;min-width:0;border:0;outline:0;background:transparent;font-size:14px}.search-box input::placeholder{color:#94a3b8}
    .navline-inner{min-height:56px}.main-nav{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
    .main-nav a{min-height:44px;display:flex;align-items:center;padding:8px 14px;border-radius:9px;color:var(--muted);font-size:14px;font-weight:700}
    .main-nav a:hover,.main-nav a.active{background:var(--primary-soft);color:var(--primary-dark)}
    .menu-toggle{display:none;width:46px;height:46px;border:1px solid var(--line);border-radius:12px;background:#fff}.menu-toggle span{display:block;width:20px;height:2px;margin:5px auto;background:var(--ink)}
    .crumbs{padding:22px 0 0;color:var(--muted);font-size:14px}.crumbs a{color:var(--primary-dark)}.crumbs span{padding:0 8px;color:#9aabc0}
    .category-title{padding:34px 0 58px;background:#fff;border-bottom:1px solid var(--line)}
    .title-layout{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}.title-copy{max-width:760px}
    .title-aside{width:300px;padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--soft)}
    .title-aside strong{display:block;color:var(--ink);font-size:27px}.title-aside small{color:var(--muted)}
    .summary-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:-28px;position:relative}
    .summary-item{padding:22px 24px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
    .summary-item strong{display:block;color:var(--ink);font-size:27px;line-height:1.2}.summary-item span{display:block;margin-top:5px;color:var(--muted);font-size:14px}
    .workspace{display:grid;grid-template-columns:245px 1fr;gap:24px;align-items:start}
    .filter-panel{padding:24px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);position:sticky;top:150px}
    .filter-panel h3{font-size:18px;margin-bottom:18px}.filter-group{padding:16px 0;border-top:1px solid var(--line)}.filter-group:first-of-type{border-top:0;padding-top:0}
    .filter-group label{display:block;margin-bottom:8px;color:var(--muted);font-size:13px;font-weight:700}.form-select,.form-control{min-height:44px;border-color:var(--line);border-radius:10px;color:var(--text)}
    .form-select:focus,.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(33,104,243,.1)}
    .data-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}
    .panel-top{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:24px 28px;border-bottom:1px solid var(--line)}
    .panel-top h2{font-size:24px;margin:0}.panel-top p{margin:4px 0 0;color:var(--muted);font-size:14px}
    .team-row{display:grid;grid-template-columns:1.5fr 1fr 1.2fr 1.1fr 1.2fr;align-items:center;gap:15px;padding:21px 28px;border-bottom:1px solid #edf2f8;transition:.2s ease}
    .team-row:hover{background:#f8fbff}.team-name{display:flex;align-items:center;gap:12px;color:var(--ink);font-weight:800}.team-logo{width:38px;height:38px;border-radius:12px;background:var(--primary-soft);display:grid;place-items:center;color:var(--primary);font-weight:900}
    .cell-label{display:block;color:#94a3b8;font-size:12px}.cell-value{display:block;color:var(--ink);font-weight:750}.trend{color:var(--accent);font-weight:800}.down{color:var(--danger)}
    .more-row{text-align:center;padding:24px}.more-row .btn{min-width:160px}
    .explain-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}.image-card{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);background:#dfeeff}.image-card img{width:100%;height:360px;object-fit:cover}
    .field-list{display:grid;gap:12px;margin-top:24px}.field-item{display:flex;gap:14px;padding:15px 0;border-bottom:1px solid var(--line)}.field-icon{width:30px;height:30px;border-radius:9px;background:var(--accent-soft);color:#087a55;display:grid;place-items:center;font-weight:900;flex:none}.field-item strong{display:block;color:var(--ink)}.field-item span{display:block;color:var(--muted);font-size:14px}
    .support-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}.support-card,.news-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px}
    .support-card h3{margin-bottom:20px}.comparison{display:grid;gap:17px}.compare-line{display:grid;grid-template-columns:90px 1fr 48px;align-items:center;gap:12px;font-size:14px}.bar{height:9px;border-radius:10px;background:#e7eef8;overflow:hidden}.bar i{display:block;height:100%;background:var(--primary);border-radius:10px}.compare-line b{color:var(--ink);text-align:right}
    .player-list{display:grid;gap:11px}.player{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid #edf2f8}.player:last-child{border-bottom:0}.player-info{display:flex;align-items:center;gap:10px}.avatar{width:34px;height:34px;border-radius:50%;background:#dceaff;color:var(--primary-dark);display:grid;place-items:center;font-weight:800}.player small{display:block;color:var(--muted)}.player b{color:var(--ink)}
    .news-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:22px}.news-card.featured{padding:0;overflow:hidden}.news-card.featured img{width:100%;height:210px;object-fit:cover}.news-card.featured .news-content{padding:24px}.news-list{display:grid;gap:12px}.news-item{display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}.news-item strong{color:var(--ink)}.news-item small{color:var(--muted);white-space:nowrap}
    .accordion-item{border:1px solid var(--line)!important;border-radius:12px!important;margin-bottom:12px;overflow:hidden;background:#fff}.accordion-button{padding:19px 22px;color:var(--ink);font-weight:750;background:#fff}.accordion-button:not(.collapsed){color:var(--primary-dark);background:var(--primary-soft);box-shadow:none}.accordion-body{padding:0 22px 20px;color:var(--muted)}
    .cta{padding:56px 0;background:var(--primary);color:#fff}.cta-layout{display:flex;align-items:center;justify-content:space-between;gap:35px}.cta h2{color:#fff;margin-bottom:10px}.cta p{margin:0;color:rgba(255,255,255,.8)}.cta .btn-light{color:var(--primary-dark);font-weight:800;border-radius:12px;min-height:48px;padding:11px 23px}.cta .btn-light:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
    .site-footer{padding:58px 0 24px;background:var(--dark);color:#b9c8da}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:42px}.footer-brand{font-size:22px;color:#fff;font-weight:900;margin-bottom:12px}.footer-grid p{max-width:390px;margin:0;color:#9fb1c7}.footer-title{color:#fff;font-weight:800;margin-bottom:14px}.footer-links{display:grid;gap:7px;font-size:14px}.copyright{display:flex;justify-content:space-between;gap:20px;border-top:1px solid rgba(255,255,255,.14);margin-top:38px;padding-top:20px;color:#8fa4bc;font-size:13px}
    @media(max-width:992px){.main-nav a{padding-inline:9px}.search-box{width:190px}.workspace,.explain-grid,.support-grid,.news-layout{grid-template-columns:1fr}.filter-panel{position:static}.summary-strip{grid-template-columns:repeat(2,1fr)}.team-row{grid-template-columns:1.5fr repeat(4,1fr);padding-inline:20px}}
    @media(max-width:768px){.top-note,.search-box{display:none}.menu-toggle{display:block}.navline{display:none}.site-header.open .navline{display:block}.navline-inner{padding:10px 0;align-items:stretch}.main-nav{display:grid;grid-template-columns:repeat(2,1fr)}.main-nav a{justify-content:center}.title-layout,.cta-layout{display:block}.title-aside{width:100%;margin-top:24px}.category-title{padding-bottom:48px}.team-row{grid-template-columns:1.4fr repeat(2,1fr);gap:10px}.team-row>div:nth-child(4),.team-row>div:nth-child(5){display:none}.panel-top{padding:21px;align-items:flex-start;flex-direction:column}.footer-grid{grid-template-columns:1fr;gap:28px}.cta .btn{margin-top:25px}.section{padding:68px 0}}
    @media(max-width:520px){.site-container{width:min(calc(100% - 24px),var(--container))}.brand{font-size:17px}.brand-mark{width:38px;height:38px}.summary-strip{gap:10px}.summary-item{padding:17px 15px}.summary-item strong{font-size:22px}.team-row{padding:17px 15px;font-size:14px}.team-logo{width:32px;height:32px}.compare-line{grid-template-columns:70px 1fr 40px}.copyright{display:grid;gap:5px}.section-head{margin-bottom:25px}}

/* roulang: framework shim */
/* 覆盖 Bootstrap 等对 a/btn 的全局默认，避免导航出现下划线/蓝链 */
.site-header a,.site-header a:hover,.navbar a,.navbar a:hover,.nav-links a,.nav-links a:hover,header nav a,header nav a:hover{text-decoration:none}
.site-header .btn,.navbar .btn,.nav-cta{text-decoration:none}