/* ============================================================
   SportLive 全站公共样式 (common.css)
   来源：由 9 个页面原 <style> 内联块中完全一致的规则合并而来
   用法：所有页面先引入本文件，再引入各自页面级 css/<页面名>.css
   ============================================================ */
:root{
  --p:#059669;--p50:#ecfdf5;--p100:#d1fae5;--p200:#a7f3d0;
  --p700:#047857;--p800:#065f46;--p900:#14532d;
  --bg:#fff;--bg-card:rgba(255,255,255,.96);
  --t900:#0f172a;--t700:#334155;--t500:#64748b;--t400:#94a3b8;--t300:#cbd5e1;
  --bdr:rgba(226,232,240,.6);--bdl:#f1f5f9;
  --red:#ef4444;--r50:#fef2f2;
  --r:12px;--shadow:0 4px 24px rgba(0,0,0,.08);
  --e:all .2s cubic-bezier(.4,0,.2,1)
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Noto Sans SC',-apple-system,BlinkMacSystemFont,sans-serif;color:var(--t700);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img{display:block;max-width:100%}
.field-bg{position:fixed;inset:0;z-index:-1;background:rgba(248,253,249,.82) url('https://images.unsplash.com/photo-1551958219-acbc608c6377?auto=format&fit=crop&w=1920&q=60') center/cover no-repeat}
.field-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(248,253,249,.93) 0%,rgba(241,245,249,.88) 100%)}
.header{background:rgba(255,255,255,.93);backdrop-filter:blur(16px);border-bottom:2px solid var(--p);position:sticky;top:0;z-index:100}
.header .wrap{display:flex;align-items:center;justify-content:space-between;height:58px}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.logo{display:flex;align-items:center;gap:10px}
.logo-b{width:34px;height:34px;background:linear-gradient(135deg,var(--p),var(--p700));border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:900}
.logo-t{font-size:20px;font-weight:900;color:var(--t900);letter-spacing:2px}
.nav{display:flex;gap:0;align-items:center;list-style:none;margin:0;padding:0}
.nav>li{position:relative}
.nav>li>a{display:flex;align-items:center;gap:4px;padding:17px 18px;font-size:14px;font-weight:500;color:var(--t500);border-bottom:2px solid transparent;transition:var(--e);white-space:nowrap;cursor:pointer}
.nav>li>a .arrow{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid currentColor;margin-left:2px;transition:transform .2s;flex-shrink:0}
.nav>li>a:hover,.nav>li:hover>a{color:var(--p);border-bottom-color:var(--p)}
.nav>li:hover>a .arrow{transform:rotate(180deg)}
.nav>li>a.on{color:var(--p);border-bottom-color:var(--p);font-weight:600}
.nav-drop{position:absolute;top:calc(100% + 1px);left:50%;transform:translateX(-50%) translateY(6px);min-width:140px;background:var(--bg);border:1px solid var(--bdr);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;pointer-events:none;padding:6px;z-index:200}
.nav>li:hover .nav-drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:auto}
.nav-drop a{display:flex;align-items:center;gap:8px;padding:9px 14px;font-size:13px;font-weight:500;color:var(--t700);border-radius:6px;transition:var(--e);white-space:nowrap}
.nav-drop a:hover{background:var(--p50);color:var(--p)}
.nav-drop a .ico{font-size:15px;width:20px;text-align:center;flex-shrink:0}
.nav-drop::before{content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%) rotate(45deg);width:10px;height:10px;background:var(--bg);border-left:1px solid var(--bdr);border-top:1px solid var(--bdr)}
.menu-btn{display:none;background:none;border:1px solid var(--bdr);border-radius:8px;padding:8px;cursor:pointer;width:40px;height:40px;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex-shrink:0}
.menu-btn span{display:block;width:18px;height:2px;background:var(--t700);border-radius:1px;transition:var(--e)}
.menu-btn.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.menu-btn.active span:nth-child(2){opacity:0}
.menu-btn.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
/* ===================== MOBILE NAV ===================== */
.mnav-overlay{position:fixed;inset:0;z-index:150;background:rgba(15,23,42,.45);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.mnav-overlay.open{opacity:1;visibility:visible}
.mnav-panel{position:fixed;top:0;left:0;bottom:0;width:300px;z-index:160;background:var(--bg);box-shadow:4px 0 32px rgba(0,0,0,.15);transform:translateX(-100%);transition:transform .35s cubic-bezier(.4,0,.2,1);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 0 24px}
.mnav-panel.open{transform:translateX(0)}
.mnav-head{padding:24px 24px 20px;background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);color:#fff}
.mnav-head .mnav-title{font-size:20px;font-weight:900;letter-spacing:2px;margin-bottom:4px}
.mnav-head .mnav-sub{font-size:12px;color:rgba(255,255,255,.4)}
.mnav-section{padding:20px 24px 0}
.mnav-section-title{font-size:11px;font-weight:700;color:var(--t400);text-transform:uppercase;letter-spacing:2px;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--bdl)}
.mnav-items{display:flex;flex-direction:column}
.mnav-item{display:flex;align-items:center;gap:12px;padding:13px 14px;font-size:14px;font-weight:500;color:var(--t700);transition:var(--e);cursor:pointer;text-decoration:none;border-radius:10px}
.mnav-item:hover,.mnav-item.active{background:var(--p50);color:var(--p700)}
.mnav-item.active{font-weight:600}
.mnav-item svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.mnav-group + .mnav-group{margin-top:2px}
.mnav-parent{user-select:none;-webkit-tap-highlight-color:transparent}
.mnav-toggle{margin-left:auto;width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .3s cubic-bezier(.4,0,.2,1)}
.mnav-toggle::before{content:'';display:block;width:8px;height:8px;border-right:2px solid var(--t400);border-bottom:2px solid var(--t400);transform:rotate(-45deg) translateY(-2px);transition:border-color .2s}
.mnav-parent:hover .mnav-toggle::before{border-color:var(--p)}
.mnav-group.open .mnav-toggle{transform:rotate(90deg)}
.mnav-sub{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1);background:var(--bdl);border-radius:0 0 10px 10px;margin:0 4px}
.mnav-group.open .mnav-sub{max-height:200px}
.mnav-group.open .mnav-item{border-radius:10px 10px 0 0;background:var(--p50);color:var(--p700)}
.mnav-sub-item{display:flex;align-items:center;gap:10px;padding:12px 14px 12px 48px;font-size:13px;font-weight:500;color:var(--t500);transition:var(--e);cursor:pointer;text-decoration:none}
.mnav-sub-item:hover{color:var(--p700);background:rgba(255,255,255,.6)}
.mnav-sub-item .sub-ico{font-size:14px;width:18px;text-align:center;flex-shrink:0}
.mnav-sub-item:last-child{border-radius:0 0 10px 10px}
.page .wrap{display:flex;gap:22px;align-items:flex-start}
.col-m{flex:1;min-width:0}
.card{background:var(--bg-card);border-radius:var(--r);border:1px solid rgba(255,255,255,.45);box-shadow:var(--shadow);overflow:hidden;margin-bottom:18px;backdrop-filter:blur(12px)}
.ch{padding:14px 18px 0;display:flex;align-items:center;justify-content:space-between}
.ch h2{font-size:15px;font-weight:700;color:var(--t900);display:flex;align-items:center;gap:8px}
.ch h2 .d{width:5px;height:16px;border-radius:3px;background:var(--p);flex-shrink:0}
.ch .more{font-size:12px;color:var(--t400);transition:var(--e)}
.ch .more:hover{color:var(--p)}
.vi-s:last-child{border-bottom:none}
.vi-s:hover{background:var(--p50)}
.vi-icon{width:20px;height:20px;background:var(--p50);border:1px solid var(--p100);border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.vi-icon::after{content:'';width:0;height:0;border-left:6px solid var(--p);border-top:3px solid transparent;border-bottom:3px solid transparent;margin-left:2px}
.vi-s:hover .vi-text{color:var(--p)}
.vi-right{display:flex;align-items:center;gap:6px;flex-shrink:0}
.vi-date{font-size:11px;color:var(--t400)}
.sc{background:var(--bg-card);border-radius:var(--r);border:1px solid rgba(255,255,255,.45);box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden;backdrop-filter:blur(12px);transition:box-shadow .25s,transform .25s}
.sc:hover{box-shadow:0 6px 28px rgba(0,0,0,.1);transform:translateY(-1px)}
.sc .ch h2{font-size:14px}
.sc .ch{padding:12px 14px 0}
.sc .ch .d{transition:height .2s}
.sc:hover .ch .d{height:18px}
.footer{background:linear-gradient(135deg,#0f172a 0%,#1e293b 50%,#0f172a 100%);padding:20px 0 16px;border-top:1px solid rgba(255,255,255,.06)}
.footer .wrap{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap}
.footer span,.footer a{font-size:12px;color:rgba(255,255,255,.4)}
.footer a:hover{color:rgba(255,255,255,.8)}
.footer .sep{color:rgba(255,255,255,.15)}
.footer .ft-tagline{display:block;text-align:center;font-size:11px;color:rgba(255,255,255,.25);margin-bottom:8px}
.mbb{display:none;position:fixed;bottom:0;left:0;right:0;z-index:110;background:rgba(255,255,255,.95);backdrop-filter:blur(16px);border-top:1px solid var(--bdr);padding:6px 0 max(6px,env(safe-area-inset-bottom));box-shadow:0 -2px 16px rgba(0,0,0,.06)}
.mbb-inner{display:flex;align-items:center;justify-content:space-around;max-width:400px;margin:0 auto}
.mbb-item .mbb-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center}
.mbb-item .mbb-icon svg{width:22px;height:22px;fill:none;stroke:var(--t400);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mbb-item .mbb-label{font-size:10px;font-weight:500;color:var(--t400);line-height:1}
.mbb-item.on .mbb-icon svg{stroke:var(--p)}
.mbb-item.on .mbb-label{color:var(--p);font-weight:700}
@media(min-width:641px){.mbb{display:none !important}}

/* ============================================================
   Utilities — 由原 HTML 行内 style 抽取而来（全站复用）
   说明：
   1) .dot-* 为联赛圆点颜色，叠加在 .mnav-dot/.sn-dot/.chip-dot/.mnav-league-dot 上使用
   2) 套 CMS 时如需调整联赛配色，只需改本段，无需动模板
   ============================================================ */
/* 联赛圆点颜色 */
.dot-epl{background:#3b82f6}        /* 英超 */
.dot-laliga{background:#eab308}     /* 西甲 */
.dot-seriea{background:#14b8a6}     /* 意甲 */
.dot-bundesliga{background:#ef4444} /* 德甲 */
.dot-ligue1{background:#8b5cf6}     /* 法甲 */
.dot-ucl{background:#6366f1}        /* 欧冠 */
.dot-uel{background:#f97316}        /* 欧联 */
.dot-euro{background:#22c55e}       /* 欧洲杯 */
.dot-wc{background:#dc2626}         /* 世界杯 */
.dot-nba{background:#1d4ed8}        /* NBA */
.dot-cba{background:#c2410c}        /* CBA */
.dot-csl{background:#b91c1c}        /* 中超 */
.dot-acl{background:#7c3aed}        /* 亚冠 */
.dot-cjl{background:#0d9488}        /* 中甲 */
.dot-kle{background:#be185d}        /* K联赛 */
/* 卡片标题色条（叠加在 .d 上使用，覆盖默认绿） */
.ch h2 .d-red{background:var(--red)}
.ch h2 .d-p700{background:var(--p700)}
/* 弱化文字（列表页“共xxx篇”等） */
.u-muted{font-size:12px;color:var(--t400)}
/* 底部导航“直播”文字 */
.mbb-item .mbb-label.u-live-label{color:var(--red);font-weight:700}