/* 新 morepage 版式 29 样式（10-17）：页头 + 首屏一整块青绿 #2dd4bf → 深紫 #4c1d95 渐变，正文浅底 #f8fafc、宽行距，
   版块标题深蓝 #1d4ed8 + 左侧青绿小方块，卡片白底浅灰边 8px 圆角几乎无阴影，表头深紫，页脚深紫 #2e1065。
   类名一律 zw- 前缀，不复用别的版式的类名（站群指纹）。
   页头和首屏是两个元素：底色用同一条「横向」渐变（颜色只随横坐标变），上下接缝处颜色完全一致；斜向的感觉靠首屏自己叠一层只压右下角的深紫。
   列表 / 文章 / 隐私 / 条款页 body 是「mp29 mp29-old」，还加载 bootstrap + module.css，这里对它们只管页头、收尾、页脚和底部两张表。 */
.mp518 {
  --zw-teal: #2dd4bf;
  --zw-purple: #4c1d95;
  --zw-blue: #1d4ed8;
  --zw-night: #2e1065;
  --zw-bg: #f8fafc;
  --zw-line: #e2e8f0;
  --zw-ink: #0f172a;
  --zw-text: #334155;
  --zw-muted: #64748b;
  --zw-teal-ink: #0f766e;
  --zw-band: linear-gradient(rgba(23, 20, 66, .26), rgba(23, 20, 66, .26)), linear-gradient(90deg, #2dd4bf 0%, #4c1d95 100%);
}

/* 首页、内页的底色和字（列表等老页面不动） */
body.mp518:not(.mp518-old) { background: var(--zw-bg); color: var(--zw-text); font-size: 16px; line-height: 1.85; }
.zw-main section[id] { scroll-margin-top: 16px; }
.zw-main h1, .zw-main h2, .zw-main h3 { letter-spacing: .005em; }
.zw-head a:focus-visible, .zw-hero a:focus-visible, .zw-cta a:focus-visible, .zw-foot a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.zw-main a:focus-visible, .zw-qa summary:focus-visible { outline: 2px solid var(--zw-blue); outline-offset: 3px; }

/* ===== 按钮（首屏、APP 页、收尾都在渐变底上）===== */
.zw-acts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.zw-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 28px; border-radius: 8px; border: 1.5px solid #fff; font-size: 15.5px; font-weight: 700; line-height: 1.4; text-decoration: none; text-shadow: none; transition: background-color .2s, color .2s, transform .2s; }
.zw-btn-solid { background: #fff; color: var(--zw-purple); }
.zw-btn-solid:hover { background: #ede9fe; border-color: #ede9fe; color: var(--zw-night); transform: translateY(-1px); }
.zw-btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .85); }
.zw-btn-ghost:hover { background: rgba(255, 255, 255, .14); color: #fff; }

/* ===== 页头：顶部条 + 导航一行 + 首页锚点一行，整块渐变 ===== */
.zw-head { position: relative; z-index: 1030; background: var(--zw-band); color: #fff; font-size: 15px; line-height: 1.6; }
.zw-ribbon { padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .8); font-size: 12.5px; letter-spacing: .06em; white-space: nowrap; }
.zw-ribbon .container { overflow: hidden; text-overflow: ellipsis; }
.zw-ribbon-dot { margin: 0 10px; color: #99f6e4; }
.mp518 .zw-navbar { padding: 0; }
.mp518 .zw-navbar-in { min-height: 70px; }
.zw-logo { order: 0; display: block; line-height: 0; margin-right: 18px; }
.zw-logo img { height: 40px; width: auto; max-width: 160px; }
.zw-join { order: 1; margin-left: auto; margin-right: 10px; padding: 6px 16px; border: 1px solid rgba(255, 255, 255, .75); border-radius: 6px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 14px; font-weight: 700; line-height: 1.5; text-decoration: none; white-space: nowrap; }
.zw-join:hover { background: #fff; color: var(--zw-purple); }
.mp518 .zw-toggle { order: 2; padding: 9px 10px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 6px; }
.mp518 .zw-toggle:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, .3); }
.zw-toggle-bar { display: block; position: relative; width: 20px; height: 2px; margin: 6px 0; border-radius: 2px; background: #fff; box-shadow: 0 -6px 0 #fff, 0 6px 0 #fff; }
.zw-menu { order: 3; }
.zw-links { gap: 4px; }
.mp518 .zw-navbar .zw-links .nav-link { padding: 7px 14px; border-radius: 6px; color: #fff; font-size: 15.5px; font-weight: 700; line-height: 1.5; text-decoration: none; transition: background-color .2s; }
.mp518 .zw-navbar .zw-links .nav-link:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.mp518 .zw-navbar .zw-links .nav-link.active { background: rgba(255, 255, 255, .22); color: #fff; }
.zw-jumps { padding: 10px 0 12px; border-top: 1px solid rgba(255, 255, 255, .16); }
.zw-jumps-in { display: flex; gap: 6px 24px; overflow-x: auto; scrollbar-width: none; }
.zw-jumps-in::-webkit-scrollbar { display: none; }
.zw-jumps a { flex: 0 0 auto; color: rgba(255, 255, 255, .9); font-size: 13.5px; line-height: 1.6; text-decoration: none; white-space: nowrap; border-bottom: 1px solid transparent; }
.zw-jumps a:hover { color: #fff; border-bottom-color: #99f6e4; }

@media (min-width: 992px) {
  .zw-menu { order: 1; }
  .zw-join { order: 2; margin: 0 0 0 16px; }
  .zw-jumps-in { flex-wrap: wrap; overflow: visible; }
}
@media (max-width: 991.98px) {
  .zw-menu { margin-top: 2px; padding: 6px 0 14px; border-top: 1px solid rgba(255, 255, 255, .16); }
  .mp518 .zw-navbar .zw-links .nav-link { padding: 10px 12px; }
}

/* ===== 首屏（首页 / 内页页名区）：接在页头下，同一条渐变 + 右下角压深 ===== */
.zw-hero { padding: 72px 0 90px; color: #fff; background: linear-gradient(160deg, rgba(46, 16, 101, 0) 55%, rgba(46, 16, 101, .5) 100%), var(--zw-band); text-shadow: 0 1px 2px rgba(20, 12, 60, .25); }
.zw-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 5px 12px; border-radius: 6px; background: rgba(255, 255, 255, .16); color: #fff; font-size: 13.5px; font-weight: 700; letter-spacing: .1em; line-height: 1.5; }
.zw-eyebrow::before { content: ""; flex: 0 0 9px; width: 9px; height: 9px; border-radius: 2px; background: #99f6e4; }
.zw-main .zw-hero h1 { margin: 0 0 22px; color: #fff; font-size: clamp(2rem, 4.4vw, 3.3rem); font-weight: 800; line-height: 1.16; letter-spacing: -.01em; }
.zw-hero-text { max-width: 780px; margin: 0 0 12px; color: rgba(255, 255, 255, .94); font-size: 17px; line-height: 1.95; }
.zw-hero-fig { margin: 0; }
.zw-hero-fig img { display: block; width: 100%; height: auto; aspect-ratio: 64 / 42; object-fit: cover; border-radius: 30px 8px; border: 1px solid rgba(255, 255, 255, .3); box-shadow: 0 18px 40px rgba(30, 16, 80, .32); }
.zw-hero-page { padding: 48px 0 60px; }
.zw-main .zw-hero-page h1 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); line-height: 1.25; margin-bottom: 18px; }
.zw-crumb { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 16px; padding: 0; color: rgba(255, 255, 255, .82); font-size: 14px; }
.zw-crumb li + li::before { content: "\203A"; margin-right: 6px; color: #99f6e4; }
.zw-crumb a { color: #fff; text-decoration: none; opacity: .9; }
.zw-crumb a:hover { opacity: 1; text-decoration: underline; }

/* ===== 版块通用 ===== */
.zw-sec { padding: 78px 0; }
.zw-sec-white { background: #fff; border-top: 1px solid #eef2f7; border-bottom: 1px solid #eef2f7; }
.zw-title { max-width: 880px; margin-bottom: 34px; }
.zw-title h2, .zw-box h2 { display: flex; align-items: flex-start; gap: 12px; margin: 0; color: var(--zw-blue); font-weight: 800; line-height: 1.32; }
.zw-title h2 { font-size: clamp(1.5rem, 2.6vw, 2.05rem); }
.zw-title h2::before, .zw-box h2::before { content: ""; flex: 0 0 12px; width: 12px; height: 12px; margin-top: .5em; border-radius: 2px; background: var(--zw-teal); }
.zw-title p { margin: 14px 0 0; color: #475569; font-size: 16.5px; line-height: 1.9; }
.zw-title-flat { margin-bottom: 0; max-width: none; }
.zw-sub { margin: 12px 0 18px; color: var(--zw-teal-ink); font-size: 1.06rem; font-weight: 700; line-height: 1.6; }

/* ===== 话题 1~3：白底长文，有图左右交替，无图文字占满整行（宽屏分两栏）===== */
.zw-stories { background: #fff; border-top: 1px solid #eef2f7; border-bottom: 1px solid #eef2f7; }
.zw-story { padding: 76px 0; }
.zw-story + .zw-story { border-top: 1px solid #eef2f7; }
.zw-story-grid { display: grid; gap: 30px; }
.zw-story-copy p { margin: 0 0 16px; color: var(--zw-text); font-size: 16.5px; line-height: 1.95; break-inside: avoid; }
.zw-story-copy p:last-child { margin-bottom: 0; }
.zw-story-fig { margin: 0; }
.zw-story-fig img { display: block; width: 100%; height: auto; aspect-ratio: 56 / 38; object-fit: cover; border-radius: 28px 8px; }
.zw-story-flip .zw-story-fig img { border-radius: 8px 28px; }

/* ===== 三小标题块：1/2/3 步骤 ===== */
.zw-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.zw-step { position: relative; padding: 28px 26px; background: #fff; border: 1px solid var(--zw-line); border-radius: 8px; }
.zw-step-no { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: linear-gradient(135deg, var(--zw-teal), var(--zw-purple)); color: #fff; font-size: 18px; font-weight: 800; line-height: 1; }
.zw-main .zw-step h3 { margin: 18px 0 8px; color: var(--zw-ink); font-size: 1.12rem; font-weight: 700; line-height: 1.5; }
.zw-step p { margin: 0; color: #475569; font-size: 15.5px; line-height: 1.85; }

/* ===== 资讯 ===== */
.zw-post { height: 100%; background: #fff; border: 1px solid var(--zw-line); border-radius: 8px; overflow: hidden; transition: border-color .2s; }
.zw-post:hover { border-color: #99f6e4; }
.zw-post-img { display: block; overflow: hidden; }
.zw-post-img img { display: block; width: 100%; height: auto; object-fit: cover; }
.zw-post-lead .zw-post-img img { aspect-ratio: 16 / 9; }
.zw-post-lead .zw-post-txt { padding: 18px 22px 22px; }
.zw-post-mini { display: flex; gap: 14px; padding: 14px; }
.zw-post-mini .zw-post-img { flex: 0 0 104px; align-self: flex-start; border-radius: 6px; }
.zw-post-mini .zw-post-img img { aspect-ratio: 4 / 3; }
.zw-post-txt { min-width: 0; }
.zw-post time { color: var(--zw-teal-ink); font-size: 13px; font-variant-numeric: tabular-nums; }
.zw-main .zw-post h3 { margin: 4px 0 6px; font-size: 1.02rem; font-weight: 700; line-height: 1.55; }
.zw-main .zw-post-lead h3 { font-size: 1.15rem; }
.zw-post h3 a { color: var(--zw-ink); text-decoration: none; }
.zw-post h3 a:hover { color: var(--zw-blue); }
.zw-post p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--zw-muted); font-size: 14.5px; line-height: 1.75; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.zw-post-lead p { -webkit-line-clamp: 3; }
.zw-more { margin-top: 30px; }
.zw-more a { padding-bottom: 2px; border-bottom: 2px solid var(--zw-teal); color: var(--zw-blue); font-size: 15px; font-weight: 700; text-decoration: none; }
.zw-more a::after { content: " \2192"; }
.zw-more a:hover { color: var(--zw-purple); }

/* ===== 话题 4~6：三列白卡 ===== */
.zw-trio { padding: 78px 0; }
.zw-box { height: 100%; padding: 26px; background: #fff; border: 1px solid var(--zw-line); border-radius: 8px; overflow: hidden; }
.zw-box-img { display: block; width: calc(100% + 52px); max-width: none; height: auto; aspect-ratio: 16 / 10; object-fit: cover; margin: -26px -26px 22px; }
.zw-box h2 { font-size: 1.24rem; line-height: 1.45; }
.zw-box h2::before { flex-basis: 10px; width: 10px; height: 10px; margin-top: .55em; }
.zw-box .zw-sub { margin: 10px 0 12px; font-size: .98rem; }
.zw-box p { margin: 0 0 10px; color: var(--zw-text); font-size: 15.5px; line-height: 1.9; }
.zw-box p:last-child { margin-bottom: 0; }

/* ===== 表格（即时比分 / 未来赛程 / APP 版本）：深紫表头 ===== */
.zw-tbl { background: #fff; border: 1px solid var(--zw-line); border-radius: 8px; }
.mp518 .zw-table { --bs-table-bg: transparent; --bs-table-color: var(--zw-text); --bs-table-border-color: var(--zw-line); margin: 0; min-width: 560px; font-size: 15px; }
.mp518 .zw-table thead th { padding: 14px 20px; background: var(--zw-purple); color: #fff; border-bottom: 0; font-size: 14px; font-weight: 700; letter-spacing: .05em; white-space: nowrap; }
.mp518 .zw-table td { padding: 14px 20px; vertical-align: middle; }
.mp518 .zw-table tbody tr:nth-child(even) > * { background-color: #f8fafc; }
.mp518 .zw-table tbody tr:hover > * { --bs-table-bg-state: rgba(45, 212, 191, .1); }
.mp518 .zw-table tbody tr:last-child > * { border-bottom: 0; }
.mp518 .zw-table .zw-day { color: var(--zw-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mp518 .zw-table .zw-comp { color: var(--zw-teal-ink); font-weight: 600; white-space: nowrap; }
.mp518 .zw-table .zw-pair { color: var(--zw-ink); font-weight: 600; }
.mp518 .zw-table .zw-ver { color: var(--zw-purple); font-weight: 700; white-space: nowrap; }
.zw-x { margin: 0 10px; color: #94a3b8; font-size: 12px; font-weight: 400; }
.zw-result { display: inline-block; min-width: 68px; padding: 2px 10px; border-radius: 6px; background: #f5f3ff; color: var(--zw-purple); font-size: 16px; font-weight: 800; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.zw-flag { display: inline-block; padding: 2px 12px; border-radius: 999px; background: #ccfbf1; color: #115e59; font-size: 13px; font-weight: 600; white-space: nowrap; }

/* ===== 常见问题：两列 ===== */
.zw-qa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; align-items: start; }
.zw-qa { padding: 0 22px; background: #fff; border: 1px solid var(--zw-line); border-radius: 8px; }
.zw-qa[open] { border-color: #5eead4; }
.zw-qa summary { position: relative; display: block; padding: 18px 32px 18px 0; color: var(--zw-ink); font-weight: 700; line-height: 1.65; list-style: none; cursor: pointer; }
.zw-qa summary::-webkit-details-marker { display: none; }
.zw-qa summary::after { content: "+"; position: absolute; top: 15px; right: 0; color: var(--zw-blue); font-size: 22px; font-weight: 400; line-height: 1.2; }
.zw-qa[open] summary::after { content: "\2212"; }
.zw-qa p { margin: 0; padding: 0 0 20px; color: #475569; line-height: 1.9; }

/* ===== 内页 ===== */
.zw-prose { max-width: 920px; }
.zw-prose p { margin: 0 0 16px; color: var(--zw-text); font-size: 16.5px; line-height: 1.95; }
.zw-prose p:last-child { margin-bottom: 0; }
.zw-card { height: 100%; padding: 24px 26px; background: #fff; border: 1px solid var(--zw-line); border-radius: 8px; }
.zw-sec-white .zw-card, .zw-sec-white .zw-step { background: var(--zw-bg); }
.zw-tag { display: inline-block; margin-bottom: 10px; padding: 2px 10px; border-radius: 4px; background: #ccfbf1; color: #115e59; font-size: 12.5px; font-weight: 700; line-height: 1.6; }
.zw-main .zw-card h3 { margin: 0 0 8px; color: var(--zw-ink); font-size: 1.08rem; font-weight: 700; line-height: 1.5; }
.zw-card p { margin: 0; color: #475569; font-size: 15.5px; line-height: 1.85; }
.zw-reach { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 24px 0 0; padding: 0; list-style: none; }
.zw-reach li { padding: 14px 18px; background: #fff; border: 1px solid var(--zw-line); border-left: 3px solid var(--zw-teal); border-radius: 8px; color: var(--zw-ink); overflow-wrap: anywhere; }
.zw-reach span { display: block; color: var(--zw-teal-ink); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; }

/* ===== 收尾 CTA：浅底上一块斜向渐变色块 ===== */
.zw-cta { padding: 56px 0 76px; background: var(--zw-bg); font-size: 16px; line-height: 1.8; }
.zw-cta-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding: 44px 48px; border-radius: 8px; color: #fff; background: linear-gradient(rgba(23, 20, 66, .24), rgba(23, 20, 66, .24)), linear-gradient(125deg, #2dd4bf 0%, #4c1d95 78%); }
.zw-cta-copy { flex: 1 1 420px; }
.zw-cta h2 { margin: 0 0 8px; color: #fff; font-size: clamp(1.4rem, 2.6vw, 1.95rem); font-weight: 800; line-height: 1.35; }
.zw-cta p { margin: 0; color: rgba(255, 255, 255, .92); }
.zw-cta-acts { display: flex; flex-wrap: wrap; gap: 12px; }

/* ===== 页脚：深紫 ===== */
.zw-foot { padding: 60px 0 26px; background: var(--zw-night); color: rgba(237, 233, 254, .74); font-size: 14.5px; line-height: 1.85; }
.zw-foot-cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.5fr; gap: 30px 40px; }
.zw-foot-logo { display: block; height: 40px; width: auto; max-width: 160px; margin-bottom: 16px; }
.zw-foot-desc { margin: 0; }
.zw-foot h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; color: #fff; font-size: 14.5px; font-weight: 700; line-height: 1.5; letter-spacing: .06em; }
.zw-foot h3::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--zw-teal); }
.zw-foot ul { margin: 0; padding: 0; list-style: none; }
.zw-foot li { margin-bottom: 7px; }
.zw-foot-help li { overflow-wrap: anywhere; }
.zw-foot a { color: rgba(255, 255, 255, .84); text-decoration: none; }
.zw-foot a:hover { color: #5eead4; }
.zw-foot-sites { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 36px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); }
.zw-foot-sites-t { color: #fff; font-weight: 700; }
.zw-foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13px; }

/* ===== 列表 / 文章 / 隐私 / 条款页（body.mp518-old）：module.css 在 768 以上把 .container 左右内边距清零，页头页脚补回来 ===== */
.mp518-old .zw-head .container, .mp518-old .zw-sec .container, .mp518-old .zw-cta .container, .mp518-old .zw-foot .container { padding-left: 12px; padding-right: 12px; }
/* 资讯列表页底部的两张表（mp/29/tables.php）：老页面正文是 module.css 的底色，表格版块自己铺底色和字 */
.mp518-old .zw-sec { background: var(--zw-bg); color: var(--zw-text); font-size: 16px; line-height: 1.85; }
.mp518-old .zw-sec-white { background: #fff; }

/* ===== 响应式 ===== */
@media (min-width: 992px) {
  .zw-story-pic .zw-story-grid { grid-template-columns: minmax(0, 1fr) 42%; gap: 56px; align-items: center; }
  .zw-story-flip .zw-story-grid { grid-template-columns: 42% minmax(0, 1fr); }
  .zw-story-flip .zw-story-fig { order: -1; }
  .zw-story:not(.zw-story-pic) .zw-story-copy { columns: 2; column-gap: 56px; }
  .zw-story:not(.zw-story-pic) .zw-title, .zw-story:not(.zw-story-pic) .zw-sub { column-span: all; }
}
@media (max-width: 991.98px) {
  .zw-foot-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767.98px) {
  .zw-hero { padding: 44px 0 52px; }
  .zw-hero-page { padding: 32px 0 40px; }
  .zw-hero-text { font-size: 16px; line-height: 1.9; }
  .zw-sec, .zw-trio, .zw-story { padding: 52px 0; }
  .zw-title { margin-bottom: 24px; }
  .zw-qa-grid { grid-template-columns: 1fr; }
  .mp518 .zw-table { font-size: 14px; }
  .mp518 .zw-table thead th, .mp518 .zw-table td { padding: 11px 14px; }
  .zw-cta { padding: 40px 0 52px; }
  .zw-cta-card { padding: 30px 22px; }
}
@media (max-width: 575.98px) {
  .zw-foot-brand, .zw-foot-help { grid-column: 1 / -1; }
  .zw-acts .zw-btn, .zw-cta-acts .zw-btn { flex: 1 1 auto; }
  .zw-logo img { height: 34px; }
  .zw-post-mini .zw-post-img { flex-basis: 88px; }
}

.mp518 .mp-table-note{margin:.6rem 0 0;font-size:.86rem;color:#6b7280}