/* ============================================================
   看个球啊 · 统一设计系统 v1.0  (theme.css)
   品牌配色：金 #f59e0b + 青 #06b6d4  ·  深色底 #0a0c14
   适用范围：首页 + 全部赛前/滚球/复盘分析页
   规则：本文件只定义「品牌/结构」变量与组件库。
        队伍色 / 语义色 (--spain/--win/--draw/--pk...) 由各页 :root 自带，不在此覆盖。
   ============================================================ */

:root{
  /* —— 结构 —— */
  --bg:#0a0c14;
  --card:#131620;
  --card2:#1a2035;
  --card-bg:#131620;
  --card-border:#1e293b;
  --border:#1e293b;
  --b1:#1e293b;
  --c1:#131620;
  --c2:#1a2035;
  --text:#e8e8e8;
  --text2:#94a3b8;
  --t1:#e2e8f0;
  --t2:#94a3b8;
  --muted:#94a3b8;
  --text-secondary:#94a3b8;

  /* —— 品牌主色：金 + 青 —— */
  --gold:#f59e0b;
  --g1:#f59e0b;          /* 金（主强调） */
  --accent:#f59e0b;
  --cyan:#06b6d4;
  --cy:#06b6d4;          /* 青（次强调） */
  --accent2:#06b6d4;
  --blue:#06b6d4;
  --purple:#06b6d4;

  /* —— 语义状态色 —— */
  --red:#ef4444;
  --r1:#ef4444;
  --green:#22c55e;
  --gn:#22c55e;

  /* —— 旧模板遗留别名（统一映射到品牌） —— */
  --orange:#f59e0b;
  --or:#f59e0b;
  --yellow:#f59e0b;

  /* —— 细节 —— */
  --shadow:rgba(0,0,0,.45);
  --card-hover:rgba(245,158,11,.10);
  --gold-light:#fcd34d;
  --red-light:#fca5a5;
  --highlight:rgba(245,158,11,.08);
  --tag-bg:rgba(6,182,212,.12);
  --table-stripe:rgba(255,255,255,.02);
}

/* ===== 全局基础美化 ===== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--cy);text-decoration:none;transition:color .2s}
a:hover{color:var(--gold)}
::selection{background:rgba(245,158,11,.30);color:#fff}
img{max-width:100%}
h1,h2,h3,h4{line-height:1.3}

/* ============================================================
   分析报告组件库（金+青 · 与西班牙-比利时模板一致）
   旧分析报告内联样式与之同名，加载本文件即统一外观。
   ============================================================ */
.wrap{max-width:1000px;margin:0 auto;padding:16px}
.hdr{
  text-align:center;padding:34px 20px 26px;
  background:linear-gradient(135deg,#0a1028 0%,#131a3a 45%,#1a1040 100%);
  border-bottom:2px solid var(--gold);
  position:relative;
}
.hdr::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:.6}
.hdr h1{font-size:1.62em;color:var(--gold);letter-spacing:.5px}
.hdr .s{color:var(--text2);font-size:.82em;margin-top:6px}
.hdr .tag{display:inline-block;background:linear-gradient(135deg,var(--gold),#fbbf24);color:#1a1206;
  padding:4px 18px;border-radius:18px;font-size:.75em;font-weight:700;margin-top:10px;
  box-shadow:0 4px 14px rgba(245,158,11,.25)}

.sec{margin:22px 0}
.sec h2{font-size:1.06em;color:var(--gold);margin-bottom:12px;
  border-left:4px solid var(--gold);padding-left:12px;
  display:flex;align-items:center;gap:8px}

.al{background:rgba(245,158,11,.05);border:1px solid var(--gold);border-radius:10px;
  padding:12px 16px;margin:12px 0;font-size:.85em;line-height:1.75}
.al.w{background:rgba(245,158,11,.05);border-color:var(--gold)}
.al.g{background:rgba(34,197,94,.05);border-color:var(--green)}
.al.r{background:rgba(239,68,68,.05);border-color:var(--red)}
.al.b{background:rgba(6,182,212,.05);border-color:var(--cyan)}

.g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-bottom:14px}
.cd{background:var(--card2);border:1px solid var(--card-border);border-radius:10px;padding:14px;
  box-shadow:0 2px 10px var(--shadow)}
.cd h4{color:var(--cyan);font-size:.78em;margin-bottom:6px;text-transform:uppercase;letter-spacing:1px}
.cd table{width:100%;font-size:.76em;border-collapse:collapse}
.cd td{padding:3px 4px;border-bottom:1px solid var(--table-stripe)}
.cd .l{color:var(--text2)}.cd .v{text-align:right;font-weight:600}

.tc{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
@media(max-width:768px){.tc{grid-template-columns:1fr}}
.td{background:var(--card2);border:1px solid var(--card-border);border-radius:10px;padding:14px;
  box-shadow:0 2px 10px var(--shadow)}
.td h4{color:var(--gold);font-size:.82em;margin-bottom:6px}
.td li{padding:3px 0;font-size:.78em;border-bottom:1px solid var(--table-stripe);list-style:none}
.td li::before{content:"• ";color:var(--gold)}

.pb{background:linear-gradient(135deg,rgba(245,158,11,.10),rgba(239,68,68,.04));
  border:1px solid var(--gold);border-radius:12px;padding:16px;margin-top:14px;
  box-shadow:0 4px 18px rgba(245,158,11,.12)}
.pg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pi{text-align:center;padding:10px 4px;background:var(--card2);border-radius:8px;border:1px solid var(--card-border);
  transition:transform .15s,border-color .15s}
.pi:hover{transform:translateY(-2px)}
.pi .pv{font-size:1.15em;font-weight:700}.pi .pl{font-size:.6em;color:var(--text2)}
.pi.hl{border-color:var(--gold);background:rgba(245,158,11,.10);box-shadow:0 0 0 1px rgba(245,158,11,.25)}

.sg{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:8px 0}
.si{text-align:center;padding:6px 4px;background:var(--card2);border-radius:6px;font-size:.78em;font-weight:600}
.si.tp{border:1px solid var(--gold);color:var(--gold)}
.si.t2{border:1px solid var(--cyan);color:var(--cyan)}

.br{background:linear-gradient(135deg,rgba(34,197,94,.04),rgba(6,182,212,.03));
  border:1px solid var(--green);border-radius:12px;padding:14px;margin-top:12px}
.br h4{color:var(--green);margin-bottom:6px}.br ol,.br ul{padding-left:20px;line-height:2;font-size:.82em}

.upd{background:rgba(6,182,212,.08);border:1px solid var(--cyan);border-radius:10px;
  padding:14px;margin:12px 0;font-size:.84em;line-height:1.75}
.ft{text-align:center;padding:22px;color:var(--text2);font-size:.7em;border-top:1px solid var(--card-border);margin-top:26px}

.highlight{background:rgba(245,158,11,.08);border-radius:8px;padding:10px 14px;margin:8px 0;
  font-size:.84em;border:1px dashed rgba(245,158,11,.25)}
.kv{display:inline-block;background:rgba(255,255,255,.05);border-radius:5px;padding:1px 7px;
  font-size:.85em;margin:0 2px;font-weight:600;color:var(--gold)}

.ximg{background:var(--card2);border:1px solid var(--card-border);border-radius:10px;padding:14px;margin:12px 0;
  box-shadow:0 2px 10px var(--shadow)}
.ximg .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ximg .xi{font-size:.76em}
.ximg .xi h4{color:var(--gold);font-size:.85em;margin-bottom:5px}
.ximg .xi .p{color:var(--cyan);font-weight:700;margin-bottom:5px}
.ximg .xi ol{padding-left:16px;line-height:1.7}
.ximg .xi li{margin:1px 0}