/* ==================================================================
   SportScope V2.0 · 深色体育数据分析 UI 设计系统
   Day2：设计令牌 / 全局导航 / 首页视觉 / 响应式
   原则：换壳不换核 —— 只覆盖表现层，不改动任何业务 DOM 与 render* 逻辑。
   加载顺序：styles.css 之后；浅色主题仍可用（工具栏 🌙/☀️ 切换）。
   ================================================================== */

:root{
  /* V2 扩展令牌 */
  --v2-bg:#f2f5fa;
  --v2-surface:#ffffff;
  --v2-card:#ffffff;
  --v2-card-hi:#eef3fa;
  --v2-line:#dfe6f0;
  --v2-line-soft:rgba(30,58,95,.10);
  --v2-text:#182238;
  --v2-muted:#5b6b84;
  --v2-dim:#8494ab;
  --v2-accent:#0e7490;
  --v2-accent-2:#2563eb;
  --v2-warn:#d97706;
  --v2-up:#dc2626;          /* 涨：红（国内习惯） */
  --v2-down:#16a34a;        /* 跌：绿 */
  --v2-radius:14px;
  --v2-radius-sm:9px;
  --v2-shadow:0 14px 34px rgba(16,24,40,.10);
  --v2-shadow-hi:0 20px 48px rgba(16,24,40,.14);
  --v2-space:16px;
  --v2-fast:160ms cubic-bezier(.2,.7,.3,1);
}

/* 把旧变量名映射到 V2 深色令牌：现有 1400 行样式里所有 var(--xxx) 自动换肤，
   无需逐条改硬编码色，也不删除任何旧规则。 */
html[data-theme="dark"]{
  --bg:var(--v2-bg);
  --card:var(--v2-card);
  --ink:var(--v2-text);
  --muted:var(--v2-muted);
  --line:var(--v2-line);
  --soft:var(--v2-surface);
  --toolbar:var(--v2-surface);
  --green:var(--v2-accent);
  --blue:var(--v2-accent-2);
  --orange:var(--v2-warn);
  --red:var(--v2-up);
  --shadow:var(--v2-shadow);
}

html[data-theme="dark"] body{
  background:var(--v2-bg);
  color:var(--v2-text);
  -webkit-font-smoothing:antialiased;
}
html[data-theme="dark"] .app{background:transparent}

/* ---------- 侧栏 / 品牌 ---------- */
html[data-theme="dark"] .side{
  display:flex;
  flex-direction:column;
  background:linear-gradient(178deg,#0d1729 0%,#0a1220 62%,#0a1120 100%);
  border-right:1px solid var(--v2-line);
  box-shadow:1px 0 0 rgba(255,255,255,.02);
}
.v2-brand{display:flex;align-items:center;gap:10px;padding:18px 16px 8px}
.v2-brand-mark{
  width:34px;height:34px;flex:0 0 34px;border-radius:10px;
  display:grid;place-items:center;font-size:18px;font-weight:800;color:#ffffff;
  background:linear-gradient(135deg,var(--v2-accent),#0e9f9c);
  box-shadow:0 6px 18px rgba(14,116,144,.28);
}
.v2-brand-txt strong{display:block;font-size:15px;line-height:1.2;letter-spacing:.02em;color:var(--ink)}
.v2-brand-txt span{display:block;margin-top:3px;font-size:10px;color:var(--muted)}
html[data-theme="dark"] .side .logo{display:none}   /* DOM 保留，仅隐藏旧标题 */

/* ---------- 全局导航：分组 ---------- */
html[data-theme="dark"] .nav{
  flex:1;min-height:0;overflow-y:auto;
  display:flex;flex-direction:column;gap:2px;
  padding:6px 10px 10px;
  scrollbar-width:thin;scrollbar-color:var(--v2-line) transparent;
}
.v2-nav-group{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
.v2-nav-label{
  padding:6px 10px 5px;font-size:10px;font-weight:700;letter-spacing:.14em;
  color:var(--v2-dim);text-transform:uppercase;white-space:nowrap;
}
html[data-theme="dark"] .nav a{
  position:relative;display:flex;align-items:center;gap:10px;
  padding:9px 11px;border-radius:var(--v2-radius-sm);
  color:var(--v2-muted);font-size:13px;font-weight:500;text-decoration:none;
  border:1px solid transparent;transition:background var(--v2-fast),color var(--v2-fast),border-color var(--v2-fast);
}
html[data-theme="dark"] .nav a .ic{
  width:20px;text-align:center;font-size:15px;opacity:.85;flex:0 0 20px;
}
html[data-theme="dark"] .nav a:hover{background:rgba(77,141,255,.10);color:var(--v2-text);border-color:var(--v2-line-soft)}
html[data-theme="dark"] .nav a.active{
  background:linear-gradient(90deg,rgba(34,211,167,.17),rgba(34,211,167,.02));
  color:var(--v2-text);font-weight:700;border-color:rgba(34,211,167,.22);
}
html[data-theme="dark"] .nav a.active::before{
  content:"";position:absolute;left:0;top:20%;bottom:20%;width:3px;
  border-radius:0 3px 3px 0;background:var(--v2-accent);
}
html[data-theme="dark"] .nav a .badge{margin-left:auto;background:var(--v2-accent);color:#04160f}

.v2-side-foot{
  margin-top:auto;padding:12px 16px 14px;border-top:1px solid var(--v2-line);
  font-size:11px;color:var(--muted);line-height:1.7;
}
.v2-side-foot-sub{margin-top:2px;font-size:10px;color:var(--v2-dim)}
.v2-status-dot{
  display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;
  background:var(--v2-warn);box-shadow:0 0 0 3px rgba(255,171,74,.14);
}

/* ---------- 全局状态条 ---------- */
.v2-statusbar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:9px 22px;font-size:11px;color:var(--muted);
  background:var(--card);border-bottom:1px solid var(--line);
}
.v2-statusbar-tag{
  padding:3px 9px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.04em;
  color:var(--v2-accent);background:rgba(34,211,167,.12);border:1px solid rgba(34,211,167,.28);
}
.v2-statusbar-sep{width:1px;height:12px;background:var(--line)}

/* ---------- 工具栏 ---------- */
html[data-theme="dark"] .toolbar{
  background:var(--v2-surface);border-bottom:1px solid var(--v2-line);
}
html[data-theme="dark"] .searchbox input,
html[data-theme="dark"] .gs-panel{
  background:#0b1526;border-color:var(--v2-line);color:var(--v2-text);
}
html[data-theme="dark"] .searchbox input::placeholder{color:var(--v2-dim)}
html[data-theme="dark"] .tb-btn{
  background:var(--v2-card-hi);border:1px solid var(--v2-line);color:var(--v2-muted);
  border-radius:var(--v2-radius-sm);transition:all var(--v2-fast);
}
html[data-theme="dark"] .tb-btn:hover{color:var(--v2-text);border-color:rgba(34,211,167,.4);background:#1b2c46}

/* ---------- 卡片 / 标签 / 表格 ---------- */
html[data-theme="dark"] .card{
  background:var(--v2-card);border:1px solid var(--v2-line);
  border-radius:var(--v2-radius);box-shadow:var(--v2-shadow);
}
html[data-theme="dark"] .card:hover{box-shadow:var(--v2-shadow-hi)}
html[data-theme="dark"] .pill,
html[data-theme="dark"] .tag,
html[data-theme="dark"] .hchip{
  background:var(--v2-card-hi);border-color:var(--v2-line);color:var(--v2-muted);
}
html[data-theme="dark"] .muted,html[data-theme="dark"] .small{color:var(--v2-muted)}
html[data-theme="dark"] .kpi .val{color:var(--v2-text)}
html[data-theme="dark"] table th{background:var(--v2-surface);color:var(--v2-muted);border-color:var(--v2-line)}
html[data-theme="dark"] table td{border-color:var(--v2-line-soft)}

/* ---------- 首页 Hero（保留原球场头图，叠加暗色渐变保证可读） ---------- */
html[data-theme="dark"] .topbar[data-tall="1"]{
  position:relative;overflow:hidden;border-radius:18px;
  border:1px solid var(--v2-line);box-shadow:var(--v2-shadow);
  padding:26px 28px;
}
html[data-theme="dark"] .topbar[data-tall="1"]::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,13,24,.90) 0%,rgba(8,13,24,.62) 55%,rgba(8,13,24,.22) 100%),
             radial-gradient(520px 180px at 88% -10%,rgba(34,211,167,.20),transparent 70%);
}
/* 内容层浮在头图之上。必须排除 .hero-art —— 它是 absolute(inset:0) 的装饰层，
   被这条通配规则改成 relative 后高度会塌成 0，底纹与 canvas 动画全都看不见。 */
html[data-theme="dark"] .topbar[data-tall="1"] > *:not(.hero-art){position:relative;z-index:1}
html[data-theme="dark"] .topbar[data-tall="1"] h1{
  font-size:27px;line-height:1.25;letter-spacing:-.01em;color:#fff;margin:6px 0 8px;
}
html[data-theme="dark"] .topbar[data-tall="1"] .sub{color:#b9c9df}
html[data-theme="dark"] .hero-eyebrow{color:var(--v2-accent);font-weight:700;font-size:11px;letter-spacing:.06em}
html[data-theme="dark"] .hero-chips .hchip{color:#d5e2f4;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)}
html[data-theme="dark"] .hero-chips .hchip b{color:var(--v2-accent)}
html[data-theme="dark"] .live-dot{background:var(--v2-up);box-shadow:0 0 0 4px rgba(255,92,108,.16)}

/* ---------- 紧凑赛事列表（沿用 Day1 的 row-item，深色适配） ---------- */
html[data-theme="dark"] .list-wrap{
  background:var(--v2-card);border:1px solid var(--v2-line);
  border-radius:var(--v2-radius);overflow:hidden;
}
html[data-theme="dark"] .row-item{
  background:transparent;border-bottom:1px solid var(--v2-line-soft);
  color:var(--v2-text);transition:background var(--v2-fast);
}
html[data-theme="dark"] .row-item:last-child{border-bottom:0}
html[data-theme="dark"] .row-item:hover{background:rgba(34,211,167,.07)}
html[data-theme="dark"] .comp-sel,
html[data-theme="dark"] .seg{background:var(--v2-card-hi);border-color:var(--v2-line);color:var(--v2-muted)}
html[data-theme="dark"] .seg .on,html[data-theme="dark"] .seg .active{background:var(--v2-accent);color:#04160f}

/* ---------- 底部导航 / 抽屉 / 提示 ---------- */
html[data-theme="dark"] .bottom-nav{
  background:rgba(10,18,32,.96);border-top:1px solid var(--v2-line);
  backdrop-filter:blur(14px);
}
html[data-theme="dark"] .bottom-nav a.active{color:var(--v2-accent)}
html[data-theme="dark"] .notif-drawer,
html[data-theme="dark"] .toast-ctn .toast{
  background:var(--v2-card);border-color:var(--v2-line);color:var(--v2-text);
}
html[data-theme="dark"] .status-banner{background:var(--v2-surface);border-color:var(--v2-line)}

/* ---------- 可访问性 ---------- */
html[data-theme="dark"] a:focus-visible,
html[data-theme="dark"] button:focus-visible,
html[data-theme="dark"] input:focus-visible{
  outline:2px solid var(--v2-accent);outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){
  html[data-theme="dark"] *{transition:none !important;animation:none !important}
}

/* ---------- 响应式适配（电脑 → 平板 → 手机） ---------- */
@media (max-width:1100px){
  .v2-statusbar{padding:8px 16px;font-size:10px;gap:9px}
  html[data-theme="dark"] .topbar[data-tall="1"]{padding:22px 20px}
}
@media (max-width:900px){
  /* 关键：原站在窄屏隐藏侧栏并交给底部导航。V2 的深色侧栏规则特异性更高，
     会覆盖原 .side{display:none}，必须在此显式恢复，否则主内容被侧栏挤出屏幕。 */
  html[data-theme="dark"] .side{display:none}
  html[data-theme="dark"] .main{margin-left:0}
  .v2-statusbar{padding:8px 14px}
}
@media (max-width:860px){
  .v2-brand-txt{display:none}
  .v2-brand{justify-content:center;padding:14px 8px 6px}
  .v2-nav-label{display:none}
  .v2-side-foot{display:none}
  .v2-statusbar span:nth-child(n+4){display:none}
}
@media (max-width:640px){
  /* 原站窄屏存在若干固定 min-width / grid 列宽，会把主内容撑出视口；
     Day2 先做防溢出兜底，Day6 再做系统化响应式重构。 */
  html[data-theme="dark"] .app,
  html[data-theme="dark"] .main,
  html[data-theme="dark"] .wrap{min-width:0;max-width:100vw}
  html[data-theme="dark"] .main{width:100%}
  html[data-theme="dark"] .wrap{overflow-x:hidden}
  html[data-theme="dark"] .wrap{padding:12px 11px 92px}
  html[data-theme="dark"] .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  html[data-theme="dark"] .card{min-width:0}
  /* 窄屏状态横幅的排版压缩统一写在 styles.css 的 640 断点里（暗/亮共用） */
  html[data-theme="dark"] .topbar[data-tall="1"] .hero-chips{flex-wrap:wrap;max-width:100%}
  html[data-theme="dark"] .topbar[data-tall="1"] .hchip{max-width:100%;white-space:normal}
  .v2-statusbar{padding:7px 12px;gap:8px}
  .v2-statusbar span:nth-child(n+2){display:none}
  html[data-theme="dark"] .topbar[data-tall="1"]{
    flex-direction:column;align-items:stretch;gap:14px;
    padding:18px 16px;border-radius:14px;
  }
  html[data-theme="dark"] .topbar[data-tall="1"] h1{font-size:22px}
  html[data-theme="dark"] .topbar[data-tall="1"] .sub{overflow-wrap:anywhere}
  html[data-theme="dark"] .topbar[data-tall="1"] .hero-chips{gap:5px}
  /* 首页 hero 两个 CTA 在 390px 下强制各占一行，避免右侧按钮被裁切 */
  html[data-theme="dark"] .topbar[data-tall="1"] .hero-cta{width:100%;flex-wrap:wrap;gap:8px}
  html[data-theme="dark"] .topbar[data-tall="1"] .hbtn{flex:1 1 100%;min-width:0;text-align:center;white-space:normal}
  html[data-theme="dark"] .nav a{padding:8px 9px;font-size:12px}
}

/* ==================================================================
   Day6 · 全站「演示数据 / live」模式横幅
   由 frontend/api-client.js 注入到 .v2-statusbar 首位；不写死在任何 HTML 里，
   便于部署方只通过 window.SPORTSCOPE_CONFIG.apiMode 切换。
   ================================================================== */
.ss-mode-banner{
  display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:2px 9px;border-radius:999px;font-size:11px;line-height:1.7;
  color:#ffd9a8;background:rgba(251,146,60,.12);
  border:1px solid rgba(251,146,60,.38);white-space:nowrap;
}
.ss-mode-banner b{font-weight:600}
.ss-mode-dot{width:6px;height:6px;border-radius:50%;background:#fb923c;flex:0 0 6px}
.ss-mode-sub{font-size:10px;opacity:.78;font-weight:400}
.ss-mode-banner[data-mode="live"]{color:#9ff0d5;background:rgba(34,211,167,.12);
  border-color:rgba(34,211,167,.4)}
.ss-mode-banner[data-mode="live"] .ss-mode-dot{background:#22d3a7}
.ss-mode-banner[data-degraded="1"]{color:#ffb4b4;background:rgba(239,68,68,.12);
  border-color:rgba(239,68,68,.4)}
.ss-mode-banner[data-degraded="1"] .ss-mode-dot{background:#ef4444}

/* ==================================================================
   Day6 · 390px 真机断点
   原则：只压缩间距与字号，不隐藏「非实时 / 模型暂停」等关键口径文本。
   ================================================================== */
@media (max-width:430px){
  html[data-theme="dark"] .v2-statusbar{
    flex-wrap:wrap;gap:4px 8px;padding:6px 10px;font-size:10px;line-height:1.5;
  }
  .v2-statusbar-sep{display:none}
  .ss-mode-banner{order:-1;width:100%;white-space:normal;font-size:10.5px}
  .ss-mode-sub{width:100%;white-space:normal}
  html[data-theme="dark"] .toolbar{padding:7px 10px;gap:7px}
  .searchbox input{font-size:12px;padding:7px 9px}
  .toolbar-actions{gap:4px}
  .toolbar-actions .tb-btn{padding:6px 8px;font-size:11px;min-width:0}
  html[data-theme="dark"] .main{padding:0}
  .wrap{padding:10px 10px 74px}
  .topbar{padding:12px 2px 8px}
  .topbar h1{font-size:20px}
  .topbar .sub{font-size:11px;line-height:1.6}
  .topbar-tools{gap:6px;flex-wrap:wrap}
  .bottom-nav a{font-size:10px;padding:6px 2px}
  .fbc-hero,.fbc-hero .fbc-leagues{gap:8px}
  .fbc-hero h1{font-size:20px}
  .fbc-hero h1 span{font-size:13px}
  .fbc-kpi b{font-size:17px}
  .fbc-card-body{gap:6px}
  .fbc-team-name{font-size:12.5px}
  .fbc-score{font-size:18px}
  .fbc-detail-hd h1{font-size:18px}
  .dv2-hd h1,.ai-hero h1{font-size:19px}
  .dv2-score{font-size:23px}
  .dv2-side b{font-size:12.5px}
  .dv2-tabs button{padding:6px 9px;font-size:11.5px}
  .ai-fact-label{font-size:11px}
  .sb-row{grid-template-columns:68px auto;gap:5px;padding:6px 8px}
  .sb-label{font-size:11px}
  .card{padding:12px}
  .row-item{padding:9px 10px}
}