/*
 * 推球人 H5 / PC premium visual refresh
 * This stylesheet intentionally changes presentation only.
 * Existing routes, API calls, DOM bindings and asset URLs remain untouched.
 */

:root {
  --tqr-navy-950: #06101e;
  --tqr-navy-900: #08172a;
  --tqr-navy-800: #0d223d;
  --tqr-blue-600: #1769ff;
  --tqr-blue-500: #2b7cff;
  --tqr-cyan-400: #40bfff;
  --tqr-gold-500: #f6b73c;
  --tqr-green-500: #20b974;
  --tqr-red-500: #e4545e;
  --tqr-ink-900: #122033;
  --tqr-ink-600: #5f6f84;
  --tqr-line: #e7edf5;
  --tqr-surface: #ffffff;
  --tqr-canvas: #f2f6fb;
  --tqr-shadow: 0 12px 36px rgba(21, 48, 86, .09);
}

html { background: var(--tqr-canvas); }
body {
  background:
    radial-gradient(circle at 15% 5%, rgba(43, 124, 255, .08), transparent 24rem),
    var(--tqr-canvas);
  color: var(--tqr-ink-900);
  font-family: "HarmonyOS Sans SC", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}

/* Desktop navigation */
.header {
  height: 68px;
  line-height: 68px;
  background: rgba(6, 16, 30, .97);
  border-bottom: 1px solid rgba(110, 164, 255, .18);
  box-shadow: 0 8px 28px rgba(1, 10, 25, .22);
  backdrop-filter: blur(12px);
}
.header .wrap { height: 68px; align-items: center; overflow: visible; }
.header .logo {
  height: 68px;
  width: 184px;
  margin-left: 0;
  background-size: 72%;
  filter: drop-shadow(0 0 14px rgba(64, 191, 255, .16));
}
.hdnav { height: 68px; text-align: center; }
.hdnav a {
  position: relative;
  height: 68px;
  padding: 0 19px;
  color: #b9c7d8;
  font-size: 15px;
  transition: color .2s ease, background-color .2s ease;
}
.hdnav a:hover { color: #fff; background: rgba(43, 124, 255, .08); }
.hdnav a.active { color: #fff; background: transparent; font-weight: 600; }
.hdnav a.active::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, var(--tqr-blue-500), var(--tqr-cyan-400));
  box-shadow: 0 0 14px rgba(43, 124, 255, .65);
}
.hdrge { display: flex; align-items: center; gap: 10px; height: 68px; }
.hdrge .tpnav,
.hdrge .lg {
  float: none;
  height: 34px;
  line-height: 34px;
  margin: 0;
  padding: 0 15px;
  border-radius: 8px;
  border: 1px solid rgba(91, 148, 255, .45);
  color: #dce8f8;
  transition: all .2s ease;
}
.hdrge .tpnav:hover,
.hdrge .lg:hover { border-color: var(--tqr-blue-500); background: rgba(43, 124, 255, .13); }
.hdrge .lg { padding-right: 15px; background: var(--tqr-blue-600); border-color: var(--tqr-blue-600); }
.hdrge .lg a { color: #fff; font-weight: 600; }
.hdrge .ui { height: 68px; }

@media (min-width: 769px) {
  body { padding-top: 88px; }
  .wrap { width: 1200px; }

  /* Home hero: reuses the existing stadium asset, no path changes. */
  .banner {
    position: relative;
    min-height: 350px;
    border-radius: 18px;
    overflow: hidden;
    background:
      linear-gradient(90deg, rgba(5, 16, 31, .98) 0%, rgba(7, 27, 53, .9) 45%, rgba(7, 30, 59, .32) 100%),
      url(../img/home-hero-premium.jpg) center / cover no-repeat;
    box-shadow: 0 22px 55px rgba(8, 28, 58, .2);
  }
  .banner::before {
    content: "专业足球赛事分析";
    position: absolute;
    z-index: 4;
    left: 54px;
    top: 82px;
    color: #fff;
    font-size: 44px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: 2px;
    text-shadow: 0 8px 26px rgba(0, 0, 0, .3);
  }
  .banner::after {
    content: "汇集专家观点与多维赛事数据  ·  数据洞察每一场比赛";
    position: absolute;
    z-index: 4;
    left: 56px;
    top: 157px;
    color: #b8c9dd;
    font-size: 17px;
    letter-spacing: .5px;
  }
  .banner .van-swipe__track,
  .banner .van-swipe-item,
  .banner .van-swipe-item > div { height: 350px !important; }
  .banner img { opacity: 0; }
  .banner .van-swipe__indicators { display: none; }

  /* Decorative trust badge inside hero */
  .banner .van-swipe-item::after {
    content: "●  每日更新  ·  专业观点  ·  数据参考";
    position: absolute;
    z-index: 5;
    left: 56px;
    top: 220px;
    min-width: 295px;
    height: 46px;
    line-height: 46px;
    padding: 0 18px;
    color: #dce9f8;
    font-size: 14px;
    border: 1px solid rgba(103, 163, 255, .35);
    border-radius: 10px;
    background: rgba(20, 61, 113, .32);
    box-shadow: inset 0 1px rgba(255, 255, 255, .06);
    backdrop-filter: blur(8px);
  }

  /* Home cards */
  .hotexpert,
  .everydan,
  .links:not(.linkkeys) {
    border: 1px solid var(--tqr-line);
    border-radius: 14px;
    box-shadow: var(--tqr-shadow);
  }
  .hotexpert { margin-top: 22px; }
  .hotexpert ul { padding: 24px 20px 28px; }
  .hotexpert li { height: 92px; }
  .hotexpert .img {
    width: 58px;
    height: 58px;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px rgba(43, 124, 255, .15), 0 8px 18px rgba(15, 42, 80, .12);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .hotexpert li:hover .img { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--tqr-blue-500), 0 10px 22px rgba(15, 42, 80, .16); }
  .hotexpert .name { margin-top: 7px; color: #34455c; font-size: 13px; font-weight: 600; }

  .hometab {
    height: 56px;
    line-height: 54px;
    padding: 0 18px;
    border-bottom-color: var(--tqr-line);
    border-radius: 14px 14px 0 0;
  }
  .hometab span { margin: 0 8px; color: #63758b; font-size: 15px; }
  .hometab span.curr { position: relative; border: 0; color: var(--tqr-ink-900); font-weight: 700; }
  .hometab span.curr::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 17px;
    margin-right: 10px;
    border-radius: 4px;
    vertical-align: -3px;
    background: linear-gradient(180deg, var(--tqr-cyan-400), var(--tqr-blue-600));
  }
  .hometab a { color: #7e8da0; line-height: 56px; }
  .hometab a:hover { color: var(--tqr-blue-600); }

  .linkkeys { margin: 18px 0 -2px; border-radius: 10px; border: 1px solid #dfe8f4; background: #f7faff; }
  .linkkeys .con { padding: 8px 14px; }
  .linkkeys .con::before { content: "热门："; color: #8b99aa; font-size: 12px; }
  .linkkeys a { color: #60738a; }

  .everydan { margin: 22px 0 2px; }
  .danlist { padding: 18px 22px; border-radius: 0 0 14px 14px; }
  .danlist .item {
    box-sizing: border-box;
    min-height: 44px;
    margin: 0;
    padding: 11px 12px 11px 30px;
    border-bottom: 1px dashed #e5ebf3;
  }
  .danlist .item::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 18px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tqr-blue-500);
    box-shadow: 0 0 0 4px rgba(43, 124, 255, .1);
  }
  .danlist .item a { color: #34455b; font-size: 13px; }
  .danlist .item:hover a { color: var(--tqr-blue-600); }

  .hottab {
    margin-top: 22px;
    border: 1px solid var(--tqr-line);
    box-shadow: var(--tqr-shadow);
  }
  .hotlist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding-top: 14px; min-height: 0; }
  .tuijielist li {
    box-sizing: border-box;
    margin: 0 0 14px;
    border: 1px solid var(--tqr-line);
    border-radius: 13px;
    box-shadow: 0 8px 24px rgba(20, 48, 84, .06);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .hotlist li { float: none; width: 100%; }
  .hotlist li:hover,
  .tuijielist li:hover {
    transform: translateY(-2px);
    border-color: rgba(43, 124, 255, .35);
    box-shadow: 0 14px 34px rgba(20, 48, 84, .11);
  }
  .hotlist li:nth-child(2n) { float: none; }
  .tuijielist .porta { padding: 12px 14px; border-bottom-color: var(--tqr-line); }
  .tuijielist .porta img { box-shadow: 0 0 0 2px rgba(43, 124, 255, .12); }
  .tuijielist .porta span { color: #31435a; font-weight: 600; }
  .tuijielist .porta em { opacity: 1; color: #78889a; background: #f2f6fb; }
  .tuijielist .porta em b { color: var(--tqr-green-500); }
  .tuijielist .con { margin: 16px 14px 8px; }
  .tuijielist .tmss .ss { border-radius: 5px; }
  .tuijielist .tmss .pk em { color: var(--tqr-gold-500); }
  .tuijielist .duiz span { color: #17263a; font-weight: 600; }
  .tuijielist .duiz em.bf { color: var(--tqr-blue-600); }
  .tuijielist .desc { margin: 7px 14px; border: 0; border-radius: 8px; background: #f5f8fc; color: #63758b; }
  .tuijielist .detc { margin: 0 5px 14px; }
  .tuijielist .detc span.gk { color: var(--tqr-blue-600); font-weight: 600; }
  .tuijielist .detc span.tui { border-color: var(--tqr-blue-500); color: var(--tqr-blue-600); }
  .tuijielist .detc span.tui em { background: var(--tqr-blue-600); }

  .links:not(.linkkeys) { margin-top: 22px; }
  .links:not(.linkkeys) .con { padding: 14px 20px 20px; }
  .links:not(.linkkeys) .con a { color: #748397; }
  .copyright { color: #9aa8b9; padding: 28px 0; }
}

/* Mobile: compact, premium and touch-friendly */
@media (max-width: 768px) {
  body { background: #f2f6fb; }
  #app { padding-bottom: 66px; }
  .wpheader {
    height: 56px;
    line-height: 56px;
    background: linear-gradient(110deg, var(--tqr-navy-950), #0b2c53);
    border-bottom: 1px solid rgba(120, 173, 255, .2);
    box-shadow: 0 8px 22px rgba(5, 20, 40, .18);
  }
  .headerhd { height: 56px; }
  .wpheader.logo,
  .wpheader .logo {
    height: 56px;
    width: 145px;
    margin-left: 12px;
    background-size: 86%;
  }
  .wpheader .tpnav { line-height: 56px; color: #d7e6f7; }
  .wpheader .tpreg a { color: #fff; }
  .wpheader .tpsearch { height: 56px; }
  .tpsign { color: #d7e6f7; }

  .banner {
    position: relative;
    min-height: 200px;
    background:
      linear-gradient(90deg, rgba(5, 17, 32, .97), rgba(8, 41, 76, .45)),
      url(../img/home-hero-premium.jpg) center / cover no-repeat;
    overflow: hidden;
  }
  .banner::before {
    content: "专业足球赛事分析";
    position: absolute;
    z-index: 4;
    left: 20px;
    top: 46px;
    color: #fff;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 1px;
    text-shadow: 0 5px 16px rgba(0, 0, 0, .35);
  }
  .banner::after {
    content: "专家观点 · 赛事数据 · 每日更新";
    position: absolute;
    z-index: 4;
    left: 21px;
    top: 93px;
    color: #b9cadf;
    font-size: 13px;
  }
  .banner .van-swipe__track,
  .banner .van-swipe-item,
  .banner .van-swipe-item > div { height: 200px !important; }
  .banner img { opacity: 0; }
  .banner .van-swipe__indicators { display: none; }

  .hotexpert,
  .everydan,
  .links,
  .hottab { margin-left: 10px; margin-right: 10px; border-radius: 12px; box-shadow: 0 8px 24px rgba(20, 48, 84, .07); }
  .hotexpert { margin-top: 12px; }
  .hometab { height: 50px; line-height: 48px; padding: 0 10px; border-bottom-color: var(--tqr-line); border-radius: 12px 12px 0 0; }
  .hometab span { color: #6b7b8e; }
  .hometab span.curr { border: 0; color: #17263a; font-weight: 700; }
  .hometab span.curr::before { content: ""; display: inline-block; width: 3px; height: 15px; margin-right: 8px; border-radius: 3px; vertical-align: -2px; background: var(--tqr-blue-500); }
  .hometab a { line-height: 50px; color: #8a98aa; }
  .hotexpert ul { padding: 18px 8px 20px; }
  .hotexpert li { height: 74px; }
  .hotexpert .img { width: 46px; height: 46px; border: 2px solid #fff; box-shadow: 0 0 0 2px rgba(43, 124, 255, .13); }
  .hotexpert .name { color: #435369; margin-top: 5px; }
  .linkkeys { margin-top: 10px; margin-bottom: 0; border: 1px solid var(--tqr-line); background: #fff; }
  .everydan { margin-top: 12px; margin-bottom: 0; }
  .danlist { padding: 8px 12px 12px; border-radius: 0 0 12px 12px; }
  .danlist .item { box-sizing: border-box; margin: 0; padding: 10px 2px; border-bottom: 1px dashed var(--tqr-line); }
  .danlist .item a { color: #3c4f67; }
  .hottab { margin-top: 12px; }

  .tuijielist { min-height: 0; }
  .tuijielist li:nth-child(n) {
    margin: 10px;
    border: 1px solid var(--tqr-line);
    border-radius: 12px;
    box-shadow: 0 7px 20px rgba(20, 48, 84, .07);
  }
  .tuijielist .porta { padding: 11px 12px; border-bottom-color: var(--tqr-line); }
  .tuijielist .porta img { box-shadow: 0 0 0 2px rgba(43, 124, 255, .12); }
  .tuijielist .porta span { color: #31435a; font-weight: 600; }
  .tuijielist .porta em { opacity: 1; background: #f2f6fb; }
  .tuijielist .porta em b { color: var(--tqr-green-500); }
  .tuijielist .con { margin: 14px 12px 6px; }
  .tuijielist .duiz span { color: #17263a; font-weight: 600; }
  .tuijielist .desc { margin: 6px 12px; border: 0; border-radius: 8px; background: #f5f8fc; }
  .tuijielist .detc { margin: 0 3px 12px; }
  .tuijielist .detc span.gk { color: var(--tqr-blue-600); font-weight: 600; }
  .tuijielist .detc span.tui { border-color: var(--tqr-blue-500); color: var(--tqr-blue-600); }
  .tuijielist .detc span.tui em { background: var(--tqr-blue-600); }

  #footer_nav {
    height: 60px;
    border-top: 1px solid rgba(16, 49, 88, .1);
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 -8px 24px rgba(18, 48, 85, .08);
    backdrop-filter: blur(12px);
  }
  #footer_nav a { height: 60px; color: #8190a3; }
  #footer_nav i { margin-top: 8px; }
  #footer_nav a.active span { color: var(--tqr-blue-600); font-weight: 600; }
}

@media (max-width: 375px) {
  .banner::before { left: 16px; font-size: 23px; }
  .banner::after { left: 17px; font-size: 12px; }
  .wpheader .tpnav { margin-right: 7px; font-size: 12px; }
  .hotexpert li { width: 20%; }
}

/* Accessibility and reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* ===== Homepage refinement 2026-08-18 ===== */
/* Contact notice: presentation only; the original banner DOM and links stay unchanged. */
@media (min-width: 769px) {
  .banner .van-swipe-item::after {
    content: "充值请联系客服QQ:2488361375  不中退还所有金豆";
    top: 218px;
    min-width: 430px;
    height: 48px;
    line-height: 48px;
    padding: 0 20px;
    color: #ffe3a3;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .3px;
    border-color: rgba(246, 183, 60, .5);
    background: linear-gradient(90deg, rgba(23, 71, 125, .72), rgba(9, 33, 65, .68));
    box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 10px 30px rgba(0, 0, 0, .18);
  }

  /* Expert ranking cards inspired by the supplied reference. */
  .hotexpert {
    overflow: hidden;
    color: #dcecff;
    background:
      linear-gradient(rgba(45, 139, 220, .035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(45, 139, 220, .035) 1px, transparent 1px),
      linear-gradient(145deg, #071d35, #06172b);
    background-size: 36px 36px, 36px 36px, auto;
    border-color: rgba(56, 137, 207, .3);
    box-shadow: 0 22px 55px rgba(4, 20, 39, .22);
  }
  .hotexpert .hometab {
    height: 62px;
    line-height: 60px;
    background: rgba(5, 24, 44, .76);
    border-bottom-color: rgba(56, 137, 207, .28);
  }
  .hotexpert .hometab span.curr { color: #f2f8ff; font-size: 18px; }
  .hotexpert .hometab span.curr::before {
    width: 4px;
    height: 21px;
    background: linear-gradient(180deg, #49d0ff, #147cff);
    box-shadow: 0 0 12px rgba(40, 183, 255, .5);
  }
  .hotexpert .hometab a { color: #8db1d3; line-height: 62px; }
  .hotexpert .hometab a:hover { color: #45bfff; }
  .hotexpert ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    padding: 18px;
    counter-reset: expert-rank;
  }
  .hotexpert li {
    position: relative;
    float: none;
    box-sizing: border-box;
    width: 100%;
    height: 226px;
    overflow: hidden;
    text-align: left;
    counter-increment: expert-rank;
    border: 1px solid rgba(66, 145, 211, .32);
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(16, 52, 87, .92), rgba(8, 34, 61, .96));
    box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 12px 28px rgba(0, 0, 0, .12);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  }
  .hotexpert li:hover {
    transform: translateY(-3px);
    border-color: rgba(45, 163, 255, .75);
    box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 18px 34px rgba(0, 0, 0, .2);
  }
  .hotexpert li::before {
    content: "TOP " counter(expert-rank, decimal-leading-zero);
    position: absolute;
    z-index: 3;
    top: 14px;
    right: 14px;
    color: #4fbfff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
  }
  .hotexpert li::after {
    content: "近期表现  ·  进入主页查看";
    position: absolute;
    z-index: 2;
    top: 112px;
    left: 17px;
    right: 17px;
    color: #88a6c2;
    font-size: 12px;
    line-height: 34px;
    border-top: 1px solid rgba(74, 145, 204, .2);
  }
  .hotexpert li > a {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
  }
  .hotexpert .img {
    position: absolute;
    top: 18px;
    left: 17px;
    width: 72px;
    height: 72px;
    margin: 0;
    border: 2px solid rgba(112, 185, 245, .34);
    background: #173a5b;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .24);
  }
  .hotexpert .img::after {
    content: "V";
    position: absolute;
    right: -3px;
    bottom: -2px;
    width: 21px;
    height: 21px;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 21px;
    text-align: center;
    border: 2px solid #0d2a47;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffca51, #f39a12);
  }
  .hotexpert .name {
    position: absolute;
    top: 30px;
    left: 104px;
    right: 48px;
    margin: 0;
    color: #f2f8ff;
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
    text-align: left;
  }
  .hotexpert li > a::before {
    content: "足球赛事分析";
    position: absolute;
    top: 61px;
    left: 104px;
    color: #93b2cf;
    font-size: 12px;
    line-height: 24px;
  }
  .hotexpert li > a::after {
    content: "+  查看专家";
    position: absolute;
    z-index: 4;
    right: 16px;
    bottom: 16px;
    left: 16px;
    box-sizing: border-box;
    height: 40px;
    color: #35a7ff;
    font-size: 14px;
    font-weight: 600;
    line-height: 38px;
    text-align: center;
    border: 1px solid rgba(38, 139, 255, .72);
    border-radius: 7px;
    background: rgba(14, 72, 132, .16);
  }
  .hotexpert li:hover > a::after { color: #fff; background: rgba(24, 112, 204, .32); }
}

@media (max-width: 768px) {
  .banner { min-height: 220px; }
  .banner .van-swipe__track,
  .banner .van-swipe-item,
  .banner .van-swipe-item > div { height: 220px !important; }
  .banner .van-swipe-item::after {
    content: "充值请联系客服QQ:2488361375  不中退还所有金豆";
    position: absolute;
    z-index: 5;
    top: 129px;
    right: 16px;
    left: 16px;
    box-sizing: border-box;
    min-height: 42px;
    padding: 11px 13px;
    color: #ffe4a6;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    text-align: left;
    border: 1px solid rgba(246, 183, 60, .46);
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(19, 68, 122, .78), rgba(7, 29, 57, .7));
    box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 8px 22px rgba(0, 0, 0, .18);
  }

  .hotexpert {
    color: #dcecff;
    background:
      linear-gradient(rgba(45, 139, 220, .04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(45, 139, 220, .04) 1px, transparent 1px),
      linear-gradient(145deg, #071d35, #06172b);
    background-size: 30px 30px, 30px 30px, auto;
    border: 1px solid rgba(56, 137, 207, .3);
    box-shadow: 0 14px 34px rgba(4, 20, 39, .2);
  }
  .hotexpert .hometab { background: rgba(5, 24, 44, .72); border-bottom-color: rgba(56, 137, 207, .28); }
  .hotexpert .hometab span.curr { color: #f2f8ff; }
  .hotexpert .hometab a { color: #83a8ca; }
  .hotexpert ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    padding: 10px;
    counter-reset: expert-rank;
  }
  .hotexpert li {
    position: relative;
    float: none;
    box-sizing: border-box;
    width: 100%;
    height: 218px;
    overflow: hidden;
    counter-increment: expert-rank;
    border: 1px solid rgba(66, 145, 211, .32);
    border-radius: 11px;
    background: linear-gradient(145deg, rgba(16, 52, 87, .92), rgba(8, 34, 61, .96));
    box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 9px 20px rgba(0, 0, 0, .12);
  }
  .hotexpert li::before {
    content: "TOP " counter(expert-rank, decimal-leading-zero);
    position: absolute;
    z-index: 3;
    top: 8px;
    right: 9px;
    color: #4fbfff;
    font-size: 9px;
    font-weight: 700;
  }
  .hotexpert li::after {
    content: "进入主页查看表现";
    position: absolute;
    z-index: 2;
    top: 143px;
    right: 8px;
    left: 8px;
    color: #86a6c3;
    font-size: 10px;
    line-height: 18px;
    text-align: center;
  }
  .hotexpert li > a { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
  .hotexpert .img {
    position: absolute;
    top: 17px;
    left: 50%;
    width: 58px;
    height: 58px;
    margin: 0;
    transform: translateX(-50%);
    border: 2px solid rgba(112, 185, 245, .34);
    background: #173a5b;
    box-shadow: 0 7px 16px rgba(0, 0, 0, .23);
  }
  .hotexpert .img::after {
    content: "V";
    position: absolute;
    right: -4px;
    bottom: -2px;
    width: 18px;
    height: 18px;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    border: 2px solid #0d2a47;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffca51, #f39a12);
  }
  .hotexpert .name {
    position: absolute;
    top: 84px;
    right: 7px;
    left: 7px;
    margin: 0;
    color: #f2f8ff;
    font-size: 14px;
    font-weight: 700;
    line-height: 21px;
    text-align: center;
  }
  .hotexpert li > a::before {
    content: "足球赛事分析";
    position: absolute;
    top: 111px;
    right: 8px;
    left: 8px;
    color: #8eacc8;
    font-size: 10px;
    line-height: 20px;
    text-align: center;
  }
  .hotexpert li > a::after {
    content: "+ 查看专家";
    position: absolute;
    z-index: 4;
    right: 9px;
    bottom: 10px;
    left: 9px;
    box-sizing: border-box;
    height: 34px;
    color: #35a7ff;
    font-size: 12px;
    font-weight: 600;
    line-height: 32px;
    text-align: center;
    border: 1px solid rgba(38, 139, 255, .7);
    border-radius: 6px;
    background: rgba(14, 72, 132, .18);
  }
}

@media (max-width: 350px) {
  .hotexpert ul { gap: 7px; padding: 8px; }
  .hotexpert li { height: 214px; }
  .hotexpert .name { font-size: 13px; }
  .banner .van-swipe-item::after { right: 12px; left: 12px; font-size: 11px; }
}