/* 天蓝：天蓝 + 粉色胶囊风格的直播站（配色参考 JRS 直播：#69c0ff 天蓝、#eb7a9a 粉、#d2e3fe 淡蓝容器） */
:root{
  --sky:#69c0ff;--blue:#48b4ff;--deep:#3179ff;--pink:#eb7a9a;--pink2:#ef5f71;
  --live-bg:#ffeeee;--panel:#d2e3fe;--tab:#bcd8ff;--soft:#e3eaff;--line:#e6eefb;
  --sh:#c1daf2;--sh2:#9ec8f2;--psh:#f1afc8;
  --ink:#222;--ink2:#555;--muted:#8a94a6;--bg:#fff;
  /* 内置日期条、切换按钮、比分表、搜索框的配色 */
  --sc-card:#fff;--sc-ink:#222;--sc-muted:#8a94a6;--sc-line:#e6eefb;--sc-live:#ef5f71;
  --sc-accent:#48b4ff;--sc-on:#fff;--sc-chip:#e3eaff;--sc-radius:10px;--hd-bg:#fff;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%}
button{font:inherit;cursor:pointer;border:0;background:none}
ul{list-style:none}
.tl-in{max-width:1200px;margin:0 auto;padding:0 16px}
.tl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- 页头：天蓝条 + 白底标题块 ---------- */
.tl-head{padding-top:8px}
.tl-head-in{position:relative;display:flex;align-items:stretch;gap:14px;min-height:104px;background:var(--sky);border-radius:0 0 10px 10px;
  box-shadow:1px 19px 38px 0 var(--sh2);overflow:hidden;padding:0 20px 0 14px}
.tl-head-in:before{content:"";position:absolute;right:-60px;top:-80px;width:260px;height:260px;border-radius:50%;border:18px solid rgba(255,255,255,.16)}
.tl-head-in:after{content:"";position:absolute;right:150px;bottom:-90px;width:180px;height:180px;border-radius:50%;border:12px solid rgba(255,255,255,.12)}
.tl-logo{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;background:#fff;padding:10px 20px 12px;min-width:0}
.tl-logo b{font-size:30px;line-height:1.2;font-weight:900;font-style:italic;letter-spacing:1px;white-space:nowrap;
  background:linear-gradient(90deg,var(--pink2),var(--pink) 30%,var(--blue) 60%,var(--deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.tl-logo i{align-self:flex-end;margin-top:4px;padding:0 2px;font-size:11px;color:#333;border-bottom:4px solid var(--sky)}
.tl-slogan{position:relative;z-index:1;align-self:center;display:flex;flex-direction:column;gap:6px;color:#fff;padding-left:8px}
.tl-slogan b{font-size:20px;letter-spacing:2px;text-shadow:0 2px 8px rgba(30,100,200,.25)}
.tl-slogan span{display:flex;flex-wrap:wrap;gap:6px}
.tl-slogan em{font-style:normal;font-size:12px;padding:1px 10px;border-radius:10px;background:rgba(255,255,255,.22)}
.tl-livebtn{position:relative;z-index:1;align-self:center;margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 16px;
  border-radius:20px;background:rgba(255,255,255,.92);color:var(--pink2);font-weight:700;box-shadow:1px 5px 16px 0 rgba(49,121,255,.25)}
.tl-livebtn em{font-style:normal;min-width:1.2em;text-align:center}
.tl-dot{width:8px;height:8px;border-radius:50%;background:var(--pink2);animation:tl-ping 1.4s ease-out infinite}
@keyframes tl-ping{0%{box-shadow:0 0 0 0 rgba(239,95,113,.6)}100%{box-shadow:0 0 0 9px rgba(239,95,113,0)}}
.tl-ball{position:relative;z-index:1;align-self:center;width:58px;height:58px;filter:drop-shadow(0 8px 12px rgba(49,121,255,.3));animation:tl-bounce 1.8s ease-in-out infinite}
@keyframes tl-bounce{50%{transform:translateY(-10px) rotate(30deg)}}

/* ---------- 胶囊导航（吸顶） ---------- */
.tl-navbar{position:sticky;top:0;z-index:30;padding:14px 0 6px;background:rgba(255,255,255,.96);backdrop-filter:blur(6px)}
.tl-navbar-in{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:10px}
.tl-navbar-in::-webkit-scrollbar{display:none}
.tl-nav{flex:none;display:inline-flex;align-items:center;height:40px;padding:0 20px;border-radius:20px;background:var(--sky);color:#fff;font-size:16px;
  box-shadow:1px 5px 16px 0 var(--sh2);transition:transform .15s,background .15s}
.tl-nav:hover{transform:translateY(-1px)}
.tl-nav.on{background:var(--pink);box-shadow:1px 5px 16px 0 var(--psh);font-weight:700}

.tl-main{padding-top:10px;padding-bottom:30px}

/* ---------- 通用 ---------- */
.tl-h{display:flex;align-items:baseline;gap:10px;margin:8px 0 12px;font-size:18px}
.tl-h span{position:relative;padding-left:12px}
.tl-h span:before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:4px;border-radius:2px;background:var(--pink)}
.tl-h small{font-size:12px;font-weight:400;color:var(--muted)}
.tl-pill{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 13px;border-radius:20px;background:var(--sky);color:#fff;font-size:13px;
  white-space:nowrap;box-shadow:1px 5px 14px 0 var(--sh2)}
.tl-pill.is-live{background:var(--pink);box-shadow:1px 5px 14px 0 var(--psh)}
.tl-pill.is-live:before{content:"";width:6px;height:6px;margin-right:5px;border-radius:50%;background:#fff;animation:tl-blink 1s infinite}
.tl-pill.is-end{background:#c3ccd9;box-shadow:none}
.tl-pill-sm{height:22px;padding:0 8px;font-size:12px;box-shadow:none}
@keyframes tl-blink{50%{opacity:.3}}
.tl-fire{display:inline-flex;align-items:center;margin-left:4px;padding:0 6px;height:18px;border-radius:9px;background:var(--live-bg);color:var(--pink2);font-size:11px;font-style:normal;font-weight:700;vertical-align:middle}
.tl-fire:before{content:"🔥";margin-right:1px;font-size:10px}
.tl-btn{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 14px;border-radius:20px;
  border:1px solid var(--blue);color:var(--blue);font-size:13px;white-space:nowrap;transition:background .15s,color .15s}
.tl-btn:hover{background:var(--blue);color:#fff}
.tl-btn.is-live{background:var(--pink);border-color:var(--pink);color:#fff;box-shadow:1px 5px 14px 0 var(--psh)}
.tl-btn.is-ghost{border-color:#d3dbe8;color:var(--muted)}
.tl-btn.is-ghost:hover{background:var(--soft);color:var(--deep)}
.tl-tlogo{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;overflow:hidden;background:var(--soft)}
.tl-tlogo img{width:100%;height:100%;object-fit:contain}
.tl-ini{font-size:12px;font-weight:700;color:var(--deep);font-style:normal}
.tl-tlogo-lg{width:44px;height:44px}
.tl-tlogo-lg .tl-ini{font-size:18px}
.tl-tlogo-xl{width:72px;height:72px;background:#fff;box-shadow:0 6px 16px rgba(49,121,255,.18)}
.tl-tlogo-xl .tl-ini{font-size:28px}
.tl-pop{animation:tl-pop .6s ease}
@keyframes tl-pop{40%{transform:scale(1.35);color:var(--pink2)}}
.tl-empty{padding:40px 0;text-align:center;color:var(--muted)}
.tl-empty p{margin-top:8px}
.tl-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:4px 0 14px;font-size:13px;color:var(--muted)}
.tl-crumb a:hover{color:var(--deep)}
.tl-crumb span{color:var(--ink2)}

/* ---------- 热门赛事：横滑卡片 ---------- */
.tl-hot{margin-top:8px}
.tl-hot-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 18px;scrollbar-width:thin}
.tl-card{flex:none;width:260px;scroll-snap-align:start;padding:12px 14px;border-radius:12px;background:#fff;border:1px solid var(--line);
  box-shadow:1px 9px 18px 0 var(--sh);transition:transform .15s}
.tl-card:hover{transform:translateY(-2px)}
.tl-card.is-live{background:var(--live-bg);border-color:#ffd9de;box-shadow:1px 9px 18px 0 var(--psh)}
.tl-card-top{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted)}
.tl-card-top span{color:var(--deep);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-card-vs{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;margin:10px 0 8px}
.tl-card-t{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;text-align:center}
.tl-card-t em{font-style:normal;font-size:13px;font-weight:700;line-height:1.3;word-break:break-all}
.tl-card-sc{font-size:22px;font-weight:800;color:var(--ink2);font-variant-numeric:tabular-nums;white-space:nowrap}
.tl-card.is-live .tl-card-sc{color:var(--pink2)}
.tl-card-st{text-align:center}

/* ---------- 首页：赛程 + 右侧栏 ---------- */
.tl-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start;margin-top:6px}
.tl-board{min-width:0}
.tl-board-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;flex-wrap:wrap}
.tl-tab{display:inline-block;padding:8px 30px;border-radius:10px 10px 0 0;background:var(--tab);font-size:17px;font-weight:700}
.tl-board-hd .hd-tabs{margin-bottom:8px}
.tl-count{margin-bottom:8px;font-size:13px;color:var(--muted)}
.tl-count b{color:var(--pink2)}
.tl-panel{background:var(--panel);border-radius:0 10px 10px 10px;padding:12px}
.tl-day{display:flex;align-items:center;gap:8px;margin:6px 4px 10px;font-size:14px;color:var(--ink2)}
.tl-day b{padding:2px 10px;border-radius:12px;background:#fff;color:var(--deep);font-size:13px}
[data-dgrp]+[data-dgrp] .tl-day{margin-top:16px}

/* 赛事卡片行：时间 | 赛事 | 主客两行 | 状态 | 按钮 */
.tl-row{display:grid;grid-template-columns:74px 92px minmax(0,1fr) auto auto;align-items:center;gap:14px;min-height:88px;margin-bottom:12px;padding:12px 18px;
  background:#fff;border-radius:10px;transition:box-shadow .2s,transform .15s}
.tl-row:last-child{margin-bottom:0}
.tl-row:hover{box-shadow:1px 9px 18px 0 var(--sh);transform:translateY(-1px)}
.tl-row.is-live{background:var(--live-bg)}
.tl-when b{display:block;font-size:17px;font-weight:700;color:var(--ink2);font-variant-numeric:tabular-nums;line-height:1.3}
.tl-when small{display:block;font-size:13px;font-weight:400;color:var(--muted)}
.tl-when .tl-fire{margin:4px 0 0}
.tl-lg{font-size:14px;color:var(--muted);line-height:1.3;word-break:break-all}
.tl-lg .hd-lg:hover{color:var(--deep)}
.tl-teams{min-width:0}
.tl-teams p{display:flex;align-items:center;gap:8px;min-height:30px;max-width:400px}
.tl-tn{flex:1;min-width:0;font-size:15px;line-height:1.3;word-break:break-all}
.tl-sc{flex:none;min-width:28px;text-align:right;font-size:18px;font-weight:800;color:var(--ink2);font-variant-numeric:tabular-nums}
.tl-row.is-live .tl-sc{color:var(--pink2)}
.tl-st,.tl-op{justify-self:end}

/* 右侧栏 */
.tl-aside{display:flex;flex-direction:column;gap:16px;min-width:0}
.tl-box{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px;box-shadow:1px 9px 18px 0 var(--sh)}
.tl-box-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:16px}
.tl-box-h a{font-size:12px;font-weight:400;color:var(--muted)}
.tl-box-h a:hover{color:var(--deep)}
.tl-box-empty{padding:16px 0;text-align:center;color:var(--muted);font-size:13px}
.tl-box-more{display:block;margin-top:8px;padding:8px;border-radius:20px;background:var(--soft);color:var(--deep);text-align:center;font-size:13px}
.tl-mini li+li{border-top:1px dashed var(--line)}
.tl-mini a{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"t f" "v s";align-items:center;gap:4px 8px;padding:9px 2px}
.tl-mini a:hover .tl-mini-vs{color:var(--deep)}
.tl-mini time{grid-area:t;font-size:12px;color:var(--muted)}
.tl-mini .tl-fire{grid-area:f;justify-self:start;margin:0}
.tl-mini-vs{grid-area:v;min-width:0;font-size:13px;line-height:1.35;word-break:break-all}
.tl-mini-vs em{font-style:normal;font-weight:700;color:var(--pink2);margin:0 2px}
.tl-mini .tl-pill{grid-area:s;justify-self:end}

/* 分页 */
.tl-pager{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.tl-pager a,.tl-pager span{display:inline-flex;align-items:center;min-width:36px;height:36px;justify-content:center;padding:0 12px;border-radius:20px;background:#fff;color:var(--ink2)}
.tl-pager a:hover{color:var(--deep)}
.tl-pager .on{background:var(--pink);color:#fff;box-shadow:1px 5px 14px 0 var(--psh)}
.tl-panel .sc-search{margin-bottom:12px}
.tl-panel .hd-dates{background:var(--panel)}

/* ---------- 详情页 ---------- */
.tl-match{position:relative;overflow:hidden;padding:18px 20px 16px;border-radius:14px;color:#fff;
  background:linear-gradient(120deg,#7cc9ff,var(--blue) 55%,#6f9dff);box-shadow:1px 19px 38px 0 var(--sh2)}
.tl-match.is-live{background:linear-gradient(120deg,#ff9bb1,var(--pink) 45%,#69c0ff)}
.tl-match:before{content:"";position:absolute;left:50%;top:50%;width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;border:2px solid rgba(255,255,255,.25)}
.tl-match-top{position:relative;display:flex;justify-content:center;align-items:center;gap:10px;font-size:13px;opacity:.95}
.tl-lgpill{padding:2px 12px;border-radius:12px;background:rgba(255,255,255,.25);font-weight:700}
.tl-match-vs{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin-top:14px}
.tl-match-t{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;min-width:0}
.tl-match-t b{font-size:20px;line-height:1.3;word-break:break-all}
.tl-match-t small{font-size:12px;opacity:.8}
.tl-match-t:hover b{text-decoration:underline}
.tl-match-mid{display:flex;flex-direction:column;align-items:center;gap:10px}
.tl-match-sc{font-size:44px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 4px 12px rgba(0,60,160,.25);white-space:nowrap}
.tl-match .tl-pill{background:rgba(255,255,255,.95);color:var(--deep);box-shadow:none}
.tl-match .tl-pill.is-live{color:var(--pink2)}
.tl-match .tl-pill.is-live:before{background:var(--pink2)}
.tl-match .tl-pill.is-end{color:var(--muted)}
.tl-match-h{position:relative;margin-top:12px;text-align:center;font-size:15px;font-weight:400;opacity:.9}

.tl-room{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start;margin-top:20px}
.tl-room-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.tl-play{background:var(--panel);border-radius:12px;padding:12px}
.tl-video{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#0d1b2e}
.tl-video iframe,.tl-video video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.tl-video-tip{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;text-align:center;color:#cfe3ff}
.tl-lines{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px}
.tl-lines-lb{font-weight:700;color:var(--ink2)}
.tl-line{display:inline-flex;align-items:center;height:36px;padding:0 18px;border-radius:20px;background:var(--sky);color:#fff;font-size:14px;box-shadow:1px 5px 14px 0 var(--sh2)}
.tl-line:hover{filter:brightness(1.05)}
.tl-line.on{background:var(--pink);box-shadow:1px 5px 14px 0 var(--psh);font-weight:700}
.tl-line.is-ext:after{content:"↗";margin-left:4px}
.tl-over{padding:36px 16px;border-radius:10px;background:#fff;text-align:center;color:var(--muted)}
.tl-over p{margin-top:10px}
.tl-over a{color:var(--deep)}
.tl-kv div{display:flex;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:14px}
.tl-kv div:last-child{border-bottom:0}
.tl-kv dt{flex:none;width:44px;color:var(--muted)}
.tl-kv dd a{color:var(--deep)}

/* ---------- 404 ---------- */
.tl-nf{padding:50px 16px;text-align:center}
.tl-nf h1{margin:14px 0 6px;font-size:22px}
.tl-nf p{color:var(--muted)}
.tl-nf-go{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:20px}

/* ---------- 页脚、回到顶部 ---------- */
.tl-foot{margin-top:20px;padding:24px 0 30px;background:linear-gradient(#f3f8ff,#e9f2ff);color:var(--muted);font-size:13px;text-align:center}
.tl-foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin-bottom:10px;color:var(--ink2)}
.tl-foot-nav a:hover{color:var(--deep)}
.tl-foot p+p{margin-top:4px}
.tl-top{position:fixed;right:18px;bottom:24px;z-index:40;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  background:var(--pink);box-shadow:1px 5px 16px 0 var(--psh);opacity:0;visibility:hidden;transform:translateY(10px);transition:.2s}
.tl-top.on{opacity:1;visibility:visible;transform:none}

/* ---------- 平板：右侧栏移到下面 ---------- */
@media (max-width:1000px){
  .tl-slogan{display:none}
  .tl-grid,.tl-room{grid-template-columns:minmax(0,1fr)}
  .tl-aside{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
}
/* ---------- 手机 ---------- */
@media (max-width:640px){
  .tl-in{padding:0 10px}
  .tl-head{padding-top:0}
  .tl-head-in{min-height:76px;padding:0 10px 0 0;border-radius:0 0 10px 10px;gap:8px}
  .tl-logo{padding:8px 12px 9px}
  .tl-logo b{font-size:21px}
  .tl-logo i{font-size:10px;border-bottom-width:3px}
  .tl-livebtn{height:30px;padding:0 10px;font-size:12px;gap:4px}
  .tl-ball{display:none}
  .tl-navbar{padding:10px 0 2px}
  .tl-navbar-in{gap:8px}
  .tl-nav{height:34px;padding:0 14px;font-size:14px}
  .tl-h{font-size:16px}
  .tl-card{width:220px;padding:10px 12px}
  .tl-card-sc{font-size:19px}
  .tl-tab{padding:7px 18px;font-size:15px}
  .tl-panel{padding:8px;border-radius:0 10px 10px 10px}
  /* 比赛行：上面一行 时间·赛事·状态，下面主客两行 + 按钮 */
  .tl-row{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"w l s" "t t o";gap:8px 10px;min-height:0;margin-bottom:8px;padding:10px 12px}
  .tl-when{grid-area:w;display:flex;align-items:center;gap:4px}
  .tl-when b{display:flex;align-items:baseline;gap:6px;font-size:15px}
  .tl-when small{display:inline;font-size:12px}
  .tl-when .tl-fire{margin:0;padding:0 4px;font-size:0}
  .tl-when .tl-fire:before{font-size:11px;margin:0}
  .tl-lg{grid-area:l;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tl-st{grid-area:s}
  .tl-teams{grid-area:t}
  .tl-op{grid-area:o;align-self:center}
  .tl-teams p{min-height:26px;gap:6px}
  .tl-tn{font-size:14px}
  .tl-sc{font-size:16px;min-width:22px}
  .tl-tlogo{width:22px;height:22px}
  .tl-pill{height:26px;padding:0 10px;font-size:12px}
  .tl-btn{height:30px;padding:0 11px;font-size:12px}
  .tl-match{padding:14px 10px 12px}
  .tl-match-t b{font-size:15px}
  .tl-tlogo-xl{width:52px;height:52px}
  .tl-tlogo-xl .tl-ini{font-size:20px}
  .tl-match-sc{font-size:32px}
  .tl-play{padding:8px}
  .tl-line{height:32px;padding:0 14px;font-size:13px}
  .tl-top{right:12px;bottom:16px;width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}