@font-face { font-family: "Twemoji Country Flags"; src: url("/static/TwemojiCountryFlags.woff2") format("woff2"); unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0020-E007F; font-display: swap; }
:root { --bg: #f3f5f9; --card: #fff; --ink: #1e293b; --dim: #64748b; --home: #2563eb; --draw: #94a3b8; --away: #e11d48; --accent: #059669; --line: #e2e8f0; --nav1: #0b1220; --nav2: #16224d; --gold: #ca8a04; --shadow: 0 1px 2px rgba(15,23,42,.05), 0 4px 14px rgba(15,23,42,.05); --shadow-lg: 0 6px 24px rgba(15,23,42,.13); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0px; font-family: "Twemoji Country Flags", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; background: linear-gradient(180deg, #eef1f7 0%, var(--bg) 240px); color: var(--ink); line-height: 1.6; }
main { max-width: 1080px; margin: 0px auto; padding: 20px 16px; }
.ai-notice { background: linear-gradient(120deg, rgb(255, 251, 235), rgb(254, 243, 199)); color: rgb(146, 64, 14); font-size: 0.8rem; text-align: center; padding: 6px 14px; line-height: 1.5; border-bottom: 1px solid rgb(253, 230, 138); }
.nav { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(120deg, var(--nav1), var(--nav2) 70%, #1e3a8a); color: rgb(255, 255, 255); padding: 12px 22px; flex-wrap: wrap; gap: 6px; position: sticky; top: 0px; z-index: 50; box-shadow: rgba(2, 6, 23, 0.35) 0px 2px 14px; }
.nav .brand { font-weight: 800; font-size: 1.12rem; margin: 0px; letter-spacing: 0.01em; color: rgb(255, 255, 255); text-decoration: none; }
.nav nav { display: flex; flex-wrap: wrap; gap: 4px; }
.nav nav a { color: rgb(203, 213, 225); text-decoration: none; margin: 0px; padding: 5px 12px; border-radius: 999px; font-size: 0.92rem; transition: 0.15s; }
.nav nav a:hover { color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.12); }
h1 { font-size: 1.45rem; font-weight: 800; letter-spacing: 0.01em; }
h2 { font-size: 1.08rem; font-weight: 700; }
.date-head { border-left: 4px solid var(--accent); padding-left: 10px; margin-top: 28px; color: rgb(15, 23, 42); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.card { display: block; background: var(--card); border-radius: 14px; padding: 16px; text-decoration: none; color: inherit; border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; }
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgb(191, 219, 254); }
.card-top { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--dim); }
.group-tag { background: linear-gradient(120deg, rgb(224, 231, 255), rgb(237, 233, 254)); color: rgb(67, 56, 202); border-radius: 6px; padding: 1px 8px; font-weight: 600; }
.teams-row { display: flex; justify-content: space-between; align-items: center; margin: 10px 0px; gap: 8px; }
.team { font-weight: 700; font-size: 1.04rem; display: flex; align-items: center; gap: 6px; min-width: 0px; }
.team .tflag { font-size: 1.35rem; line-height: 1; flex-shrink: 0; }
.tflag { font-style: normal; }
.score.final { font-weight: 800; font-size: 1.25rem; color: var(--accent); background: rgb(236, 253, 245); border-radius: 8px; padding: 0px 10px; flex-shrink: 0; }
.score.vs { color: rgb(203, 213, 225); font-weight: 700; font-size: 0.82rem; flex-shrink: 0; }
.prob-bar { display: flex; height: 24px; border-radius: 999px; overflow: hidden; font-size: 0.72rem; color: rgb(255, 255, 255); text-align: center; font-weight: 600; box-shadow: rgba(15, 23, 42, 0.18) 0px 1px 2px inset; }
.prob-bar.big { height: 38px; font-size: 0.98rem; margin: 14px 0px; border-radius: 12px; }
.prob-bar .seg { display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; min-width: 0px; }
.seg.home { background: linear-gradient(rgb(59, 130, 246), rgb(37, 99, 235)); }
.seg.draw { background: linear-gradient(rgb(168, 179, 194), rgb(148, 163, 184)); }
.seg.away { background: linear-gradient(rgb(244, 63, 94), rgb(225, 29, 72)); }
.top-scores { font-size: 0.85rem; margin-top: 10px; color: var(--dim); }
.chip { display: inline-block; background: rgb(236, 253, 245); color: rgb(6, 95, 70); border-radius: 6px; border: 1px solid rgb(209, 250, 229); padding: 1px 7px; margin: 2px 4px 0px 0px; white-space: nowrap; font-size: 0.82rem; }
.chip em { font-style: normal; opacity: 0.7; }
.back { display: inline-block; margin-bottom: 10px; color: var(--home); text-decoration: none; font-weight: 600; font-size: 0.92rem; }
.back:hover { text-decoration: underline; }
.detail-head .sub { color: var(--dim); margin-top: -6px; }
.detail-head h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vs-small { font-size: 0.95rem; color: rgb(203, 213, 225); font-weight: 700; }
.team-link { color: inherit; text-decoration: none; border-bottom: 2px solid transparent; transition: border-color 0.15s; }
.team-link:hover { border-color: var(--home); color: var(--home); }
.squad-link { float: right; font-size: 0.78rem; font-weight: 500; color: var(--home); text-decoration: none; }
.squad-link:hover { text-decoration: underline; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0px; }
@media (max-width: 760px) {
  .grid-2 { grid-template-columns: 1fr; }
}
.panel { background: var(--card); border-radius: 14px; padding: 16px 20px; border: 1px solid var(--line); box-shadow: var(--shadow); margin: 16px 0px; }
.grid-2 .panel { margin: 0px; }
.panel h2 { margin-top: 2px; }
table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.compare th, .compare td { padding: 7px 8px; text-align: center; border-bottom: 1px solid rgb(241, 245, 249); }
.compare td:first-child { text-align: left; }
.compare tr:hover td { background: rgb(248, 250, 252); }
.edge-row .pos { color: rgb(180, 83, 9); font-weight: 700; }
.edge-row .neg { color: rgb(107, 114, 128); }
.heatmap { table-layout: fixed; text-align: center; font-size: 0.78rem; }
.heatmap th { background: rgb(241, 245, 249); padding: 4px; }
.heatmap th.corner { font-size: 0.68rem; }
.heatmap td { padding: 6px 2px; border: 1px solid rgb(255, 255, 255); border-radius: 2px; }
.form-table td { padding: 5px 8px; border-bottom: 1px solid rgb(241, 245, 249); }
.form-table tr:last-child td { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.dim { color: var(--dim); }
.small { font-size: 0.78rem; }
.result { display: inline-block; width: 1.7em; text-align: center; border-radius: 6px; color: rgb(255, 255, 255); font-size: 0.8rem; font-weight: 600; }
.result.w { background: var(--accent); }
.result.d { background: var(--draw); }
.result.l { background: var(--away); }
.elo-chart { width: 100%; height: auto; background: rgb(250, 251, 253); border: 1px solid rgb(241, 245, 249); border-radius: 8px; }
.explain-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.explain-item { display: flex; align-items: flex-start; gap: 12px; background: rgb(248, 250, 252); border: 1px solid rgb(238, 242, 247); border-radius: 10px; padding: 9px 14px; }
.explain-item.conclusion { background: linear-gradient(120deg, rgb(239, 246, 255), rgb(238, 242, 255)); border-color: rgb(219, 234, 254); }
.explain-head { flex: 0 0 8.2rem; display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.85rem; color: rgb(51, 65, 85); line-height: 1.65; white-space: nowrap; }
.explain-item.conclusion .explain-head { color: rgb(30, 64, 175); }
.explain-icon { font-size: 1rem; }
.explain-text { flex: 1 1 0%; min-width: 0px; font-size: 0.9rem; color: rgb(71, 85, 105); line-height: 1.65; }
.explain-item.conclusion .explain-text { color: rgb(30, 58, 138); font-weight: 500; }
@media (max-width: 560px) {
  .explain-item { flex-direction: column; gap: 2px; }
  .explain-head { flex: 0 0 auto; }
}
.explanation { font-size: 0.98rem; }
.note { font-size: 0.82rem; color: var(--dim); }
.table-wrap { overflow-x: auto; border-radius: 10px; }
.rank-table th, .rank-table td { padding: 7px 9px; text-align: center; border-bottom: 1px solid rgb(238, 242, 247); white-space: nowrap; }
.rank-table .team-cell { text-align: left; font-weight: 700; }
.rank-table .team-cell .team-link { display: flex; align-items: center; gap: 7px; }
.rank-table .team-cell .tflag { font-size: 1.25rem; line-height: 1; }
.rank-table thead th { background: linear-gradient(120deg, var(--nav1), var(--nav2)); color: rgb(255, 255, 255); position: sticky; top: 0px; }
.rank-table tbody tr { background: rgb(255, 255, 255); }
.rank-table tbody tr:nth-child(2n) { background: rgb(250, 251, 253); }
.rank-table tbody tr:hover { background: rgb(239, 246, 255); }
.champ { font-weight: 700; }
footer { max-width: 1080px; margin: 28px auto; padding: 14px 16px 0px; color: var(--dim); font-size: 0.82rem; border-top: 1px solid var(--line); }
.disclaimer { color: rgb(180, 83, 9); }
.team-hero { display: flex; align-items: center; gap: 22px; background: linear-gradient(120deg, rgb(255, 255, 255), rgb(240, 246, 255) 60%, rgb(238, 242, 255)); border: 1px solid rgb(219, 229, 243); }
.team-hero-flag { font-size: 4.6rem; line-height: 1; filter: drop-shadow(rgba(15, 23, 42, 0.25) 0px 4px 8px); }
.team-hero-info h1 { margin: 0px 0px 4px; }
.team-hero-info .sub { color: var(--dim); margin: 0px 0px 10px; }
.team-en { font-size: 0.85rem; font-weight: 500; color: rgb(148, 163, 184); margin-left: 6px; }
.stat-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.stat-chip { background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; font-size: 0.82rem; font-weight: 600; color: rgb(51, 65, 85); box-shadow: var(--shadow); }
.stat-chip.gold { background: linear-gradient(120deg, rgb(254, 249, 195), rgb(254, 243, 199)); border-color: rgb(253, 230, 138); color: rgb(146, 64, 14); }
.adv-row { display: flex; align-items: center; gap: 10px; margin: 8px 0px; }
.adv-label { width: 64px; flex-shrink: 0; font-size: 0.85rem; font-weight: 600; color: rgb(51, 65, 85); }
.adv-track { position: relative; flex: 1 1 0%; height: 16px; background: rgb(238, 242, 247); border-radius: 999px; overflow: hidden; }
.adv-track i { position: absolute; left: 0px; top: 0px; bottom: 0px; border-radius: 999px; background: linear-gradient(90deg, rgb(52, 211, 153), rgb(5, 150, 105)); }
.adv-val { width: 52px; flex-shrink: 0; text-align: right; font-size: 0.85rem; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.pos-head { margin: 18px 0px 8px; padding-left: 10px; border-left: 4px solid var(--home); font-size: 0.98rem; }
.pos-head.pos-gk { border-color: rgb(245, 158, 11); }
.pos-head.pos-df { border-color: rgb(37, 99, 235); }
.pos-head.pos-mf { border-color: rgb(5, 150, 105); }
.pos-head.pos-fw { border-color: rgb(225, 29, 72); }
.squad-table th, .squad-table td { padding: 6px 10px; text-align: center; border-bottom: 1px solid rgb(241, 245, 249); white-space: nowrap; }
.squad-table thead th { background: rgb(248, 250, 252); color: var(--dim); font-size: 0.78rem; font-weight: 600; }
.squad-table .squad-name { text-align: left; font-weight: 600; }
.squad-table .squad-club { text-align: left; color: rgb(71, 85, 105); }
.squad-table .squad-no { color: var(--dim); font-variant-numeric: tabular-nums; }
.squad-table tbody tr:hover { background: rgb(248, 250, 252); }
.cap-badge { display: inline-block; background: var(--gold); color: rgb(255, 255, 255); border-radius: 50%; width: 1.25em; height: 1.25em; line-height: 1.25em; text-align: center; font-size: 0.72rem; font-weight: 700; vertical-align: 10%; }
.ko-card { cursor: default; }
.slot-row { font-size: 0.85rem; color: var(--dim); margin: 6px 0px 10px; font-weight: 600; }
.ko-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ko-team { padding: 3px 0px; }
.ko-line { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 0.85rem; }
.ko-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0px; }
.ko-val { font-style: normal; font-size: 0.8rem; font-weight: 700; color: rgb(30, 64, 175); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.ko-p { display: block; position: relative; height: 5px; margin-top: 3px; background: rgb(238, 242, 247); border-radius: 999px; overflow: hidden; }
.ko-p i { position: absolute; left: 0px; top: 0px; bottom: 0px; border-radius: 999px; background: linear-gradient(90deg, rgb(147, 197, 253), rgb(59, 130, 246)); }
.if-pair { font-size: 0.8rem; background: linear-gradient(120deg, rgb(254, 252, 232), rgb(254, 249, 195)); border: 1px solid rgb(254, 240, 138); border-radius: 8px; padding: 7px 10px; margin-top: 10px; color: rgb(113, 63, 18); }
.bracket-wrap { overflow-x: auto; background: linear-gradient(rgb(255, 255, 255), rgb(246, 249, 253)); border: 1px solid var(--line); border-radius: 16px; padding: 20px 16px; box-shadow: var(--shadow); }
.bracket { display: flex; gap: 28px; min-width: 1320px; height: 780px; --bline: #cbd5e1; }
.bside { display: flex; gap: 28px; flex: 4 1 0%; min-width: 0px; }
.bcenter { flex: 1.15 1 0%; position: relative; display: flex; flex-direction: column; justify-content: center; padding-top: 30px; }
.round { display: flex; flex-direction: column; flex: 1 1 0%; position: relative; padding-top: 30px; min-width: 0px; }
.rlabel { position: absolute; top: 0px; left: 0px; right: 0px; text-align: center; font-size: 0.78rem; font-weight: 800; color: rgb(100, 116, 139); letter-spacing: 0.12em; }
.bcenter > .rlabel { top: 0px; }
.pair { flex: 1 1 0%; display: flex; flex-direction: column; justify-content: space-around; position: relative; }
.pair.single { justify-content: center; }
.bmatch { display: block; background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 9px; padding: 5px 7px; text-decoration: none; color: inherit; position: relative; z-index: 1; box-shadow: rgba(15, 23, 42, 0.07) 0px 1px 3px; transition: 0.12s; }
.bmatch:hover { border-color: rgb(147, 197, 253); box-shadow: rgba(29, 78, 216, 0.2) 0px 4px 12px; transform: translateY(-1px); }
.bm-head { display: flex; justify-content: space-between; font-size: 0.64rem; color: rgb(148, 163, 184); margin-bottom: 2px; }
.bm-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.76rem; line-height: 1.5; gap: 4px; }
.bm-row .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-row .p { color: rgb(100, 116, 139); font-size: 0.68rem; flex-shrink: 0; }
.bm-row.fav .n { font-weight: 700; color: rgb(29, 78, 216); }
.bm-row.fav .p { color: rgb(29, 78, 216); font-weight: 700; }
.bleft .pair:not(.single)::after { content: ""; position: absolute; right: -15px; top: 25%; height: 50%; width: 14px; border-top: 2px solid var(--bline); border-right: 2px solid var(--bline); border-bottom: 2px solid var(--bline); border-left: 0; border-radius: 0px 8px 8px 0px; }
.bright .pair:not(.single)::after { content: ""; position: absolute; left: -15px; top: 25%; height: 50%; width: 14px; border-top: 2px solid var(--bline); border-bottom: 2px solid var(--bline); border-left: 2px solid var(--bline); border-right: 0; border-radius: 8px 0px 0px 8px; }
.bleft .pair.single::after { content: ""; position: absolute; right: -15px; top: 50%; width: 14px; height: 2px; background: var(--bline); }
.bright .pair.single::after { content: ""; position: absolute; left: -15px; top: 50%; width: 14px; height: 2px; background: var(--bline); }
.bleft .round:not(.rfirst) .bmatch::before, .final-node .bmatch::before { content: ""; position: absolute; left: -15px; top: 50%; width: 14px; height: 2px; background: var(--bline); }
.bright .round:not(.rfirst) .bmatch::before { content: ""; position: absolute; right: -15px; top: 50%; width: 14px; height: 2px; background: var(--bline); }
.final-node .bmatch::after { content: ""; position: absolute; right: -15px; top: 50%; width: 14px; height: 2px; background: var(--bline); }
.final-node .bmatch { border: 2px solid rgb(251, 191, 36); box-shadow: rgba(202, 138, 4, 0.28) 0px 4px 14px; }
.champ-box { position: absolute; top: 36px; left: 0px; right: 0px; text-align: center; background: linear-gradient(135deg, rgb(254, 249, 195), rgb(253, 230, 138)); border: 1px solid rgb(252, 211, 77); border-radius: 14px; padding: 12px 6px; box-shadow: rgba(202, 138, 4, 0.18) 0px 4px 14px; }
.crown { font-size: 1.7rem; line-height: 1; }
.champ-name { font-weight: 800; font-size: 1.05rem; color: rgb(146, 64, 14); margin-top: 2px; }
.champ-sub { font-size: 0.72rem; color: rgb(180, 83, 9); }
.champ-others { font-size: 0.68rem; color: rgb(161, 98, 7); margin-top: 4px; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.third-box { position: absolute; bottom: 14px; left: 0px; right: 0px; text-align: center; background: rgb(255, 255, 255); border: 1px dashed rgb(203, 213, 225); border-radius: 10px; padding: 8px 6px; }
.third-box .bm-head { justify-content: center; gap: 4px; }
.third-line { font-size: 0.78rem; }
.third-link { font-size: 0.72rem; color: var(--home); text-decoration: none; }
.detail-title { margin-top: 36px; }
.ko-card:target { outline: rgb(147, 197, 253) solid 3px; outline-offset: 2px; }
@media (max-width: 760px) {
  .bracket { height: 700px; }
  .bracket-wrap { padding: 10px 6px; border-radius: 12px; }
  .team-hero { gap: 14px; }
  .team-hero-flag { font-size: 3.2rem; }
  .nav { padding: 10px 14px; }
}