/* 橙光：活力橙 + 墨色胶囊风格的直播站（版式同天蓝；进行中用红色） */
:root{
  --sky:#ff7a1a;--blue:#f76707;--deep:#d9480f;--pink:#2b1b10;--pink2:#f03e3e;
  --live:#f03e3e;--lsh:#ffc9c9;
  --live-bg:#fff0ee;--panel:#ffefdc;--tab:#ffd8a8;--soft:#fff4e6;--line:#f6dfc8;
  --sh:#ffe0c2;--sh2:#ffc48f;--psh:#c9b8ab;
  --ink:#222;--ink2:#555;--muted:#8a94a6;--bg:#fff;
  /* 内置日期条、切换按钮、比分表、搜索框的配色 */
  --sc-card:#fff;--sc-ink:#222;--sc-muted:#8a94a6;--sc-line:#f6dfc8;--sc-live:#f03e3e;
  --sc-accent:#ff7a1a;--sc-on:#fff;--sc-chip:#fff4e6;--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}
.cg-in{max-width:1200px;margin:0 auto;padding:0 16px}
.cg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- 页头：橙光条 + 白底标题块 ---------- */
.cg-head{padding-top:8px}
.cg-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}
.cg-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)}
.cg-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)}
.cg-logo{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;background:#fff;padding:10px 20px 12px;min-width:0}
.cg-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(--pink),var(--deep) 40%,var(--sky));-webkit-background-clip:text;background-clip:text;color:transparent}
.cg-logo i{align-self:flex-end;margin-top:4px;padding:0 2px;font-size:11px;color:#333;border-bottom:4px solid var(--sky)}
.cg-slogan{position:relative;z-index:1;align-self:center;display:flex;flex-direction:column;gap:6px;color:#fff;padding-left:8px}
.cg-slogan b{font-size:20px;letter-spacing:2px;text-shadow:0 2px 8px rgba(150,50,10,.25)}
.cg-slogan span{display:flex;flex-wrap:wrap;gap:6px}
.cg-slogan em{font-style:normal;font-size:12px;padding:1px 10px;border-radius:10px;background:rgba(255,255,255,.22)}
.cg-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(217,72,15,.25)}
.cg-livebtn em{font-style:normal;min-width:1.2em;text-align:center}
.cg-dot{width:8px;height:8px;border-radius:50%;background:var(--pink2);animation:cg-ping 1.4s ease-out infinite}
@keyframes cg-ping{0%{box-shadow:0 0 0 0 rgba(240,62,62,.6)}100%{box-shadow:0 0 0 9px rgba(240,62,62,0)}}
.cg-ball{position:relative;z-index:1;align-self:center;width:58px;height:58px;filter:drop-shadow(0 8px 12px rgba(217,72,15,.3));animation:cg-bounce 1.8s ease-in-out infinite}
@keyframes cg-bounce{50%{transform:translateY(-10px) rotate(30deg)}}

/* ---------- 胶囊导航（吸顶） ---------- */
.cg-navbar{position:sticky;top:0;z-index:30;padding:14px 0 6px;background:rgba(255,255,255,.96);backdrop-filter:blur(6px)}
.cg-navbar-in{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:10px}
.cg-navbar-in::-webkit-scrollbar{display:none}
.cg-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}
.cg-nav:hover{transform:translateY(-1px)}
.cg-nav.on{background:var(--pink);box-shadow:1px 5px 16px 0 var(--psh);font-weight:700}

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

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

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

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

/* 赛事卡片行：时间 | 赛事 | 主客两行 | 状态 | 按钮 */
.cg-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}
.cg-row:last-child{margin-bottom:0}
.cg-row:hover{box-shadow:1px 9px 18px 0 var(--sh);transform:translateY(-1px)}
.cg-row.is-live{background:var(--live-bg)}
.cg-when b{display:block;font-size:17px;font-weight:700;color:var(--ink2);font-variant-numeric:tabular-nums;line-height:1.3}
.cg-when small{display:block;font-size:13px;font-weight:400;color:var(--muted)}
.cg-when .cg-fire{margin:4px 0 0}
.cg-lg{font-size:14px;color:var(--muted);line-height:1.3;word-break:break-all}
.cg-lg .hd-lg:hover{color:var(--deep)}
.cg-teams{min-width:0}
.cg-teams p{display:flex;align-items:center;gap:8px;min-height:30px;max-width:400px}
.cg-tn{flex:1;min-width:0;font-size:15px;line-height:1.3;word-break:break-all}
.cg-sc{flex:none;min-width:28px;text-align:right;font-size:18px;font-weight:800;color:var(--ink2);font-variant-numeric:tabular-nums}
.cg-row.is-live .cg-sc{color:var(--pink2)}
.cg-st,.cg-op{justify-self:end}

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

/* 分页 */
.cg-pager{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.cg-pager a,.cg-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)}
.cg-pager a:hover{color:var(--deep)}
.cg-pager .on{background:var(--pink);color:#fff;box-shadow:1px 5px 14px 0 var(--psh)}
.cg-panel .sc-search{margin-bottom:12px}
.cg-panel .hd-dates{background:var(--panel)}

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

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

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

/* ---------- 页脚、回到顶部 ---------- */
.cg-foot{margin-top:20px;padding:24px 0 30px;background:linear-gradient(#fffaf4,#fff1e3);color:var(--muted);font-size:13px;text-align:center}
.cg-foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin-bottom:10px;color:var(--ink2)}
.cg-foot-nav a:hover{color:var(--deep)}
.cg-foot p+p{margin-top:4px}
.cg-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}
.cg-top.on{opacity:1;visibility:visible;transform:none}

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