:root { --ink:#172033; --muted:#64748b; --line:#dbe3ed; --paper:#f5f7fa; --white:#fff; --blue:#1769c2; --blue-soft:#eaf3ff; --red:#d74b4b; --orange:#e68a25; --green:#19856b; --purple:#7662b9; --shadow:0 6px 18px rgba(30,43,65,.06); }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Microsoft YaHei", "PingFang SC", Arial, sans-serif; font-size:14px; letter-spacing:0; }
button, input, select { font:inherit; }
button { cursor:pointer; }
.topbar { height:72px; background:var(--white); display:flex; align-items:center; justify-content:space-between; padding:0 max(24px, calc((100vw - 1360px)/2)); border-bottom:1px solid var(--line); }
.brand { display:flex; gap:12px; align-items:center; }
.brand-mark { width:45px; height:38px; display:grid; place-items:center; background:var(--ink); color:#fff; font-size:11px; font-weight:800; position:relative; }
.brand-mark b { position:absolute; right:-9px; top:-7px; color:var(--red); font-size:22px; }
.brand strong { display:block; font-size:19px; font-weight:750; line-height:1.15; }
.brand small { display:block; color:var(--muted); margin-top:4px; font-size:12px; }
.source-status { color:var(--muted); display:flex; align-items:center; gap:8px; }
.status-dot { width:8px; height:8px; border-radius:50%; background:#94a3b8; }
.status-dot.live { background:var(--green); }
.nav { background:#113e71; min-height:48px; display:flex; padding:0 max(24px, calc((100vw - 1360px)/2)); overflow-x:auto; }
.nav-item { border:0; color:#dbeafe; background:transparent; padding:0 20px; min-width:105px; height:48px; white-space:nowrap; }
.nav-item:hover, .nav-item.active { background:#1f76c7; color:#fff; }
.layout { max-width:1360px; margin:0 auto; padding:18px 24px 48px; }
.control-band { min-height:72px; background:#fff; border:1px solid var(--line); display:flex; align-items:end; gap:12px; padding:12px 14px; box-shadow:var(--shadow); }
.field { display:flex; flex-direction:column; min-width:150px; gap:6px; }
.field.compact { min-width:110px; }
.field.summary { flex:1; min-width:230px; padding-bottom:7px; }
.field label { font-size:12px; color:var(--muted); }
.field input, .field select { height:34px; border:1px solid #bcc9d8; padding:0 9px; color:var(--ink); background:#fff; outline:none; border-radius:3px; }
.field input:focus, .field select:focus { border-color:var(--blue); box-shadow:0 0 0 2px rgba(23,105,194,.12); }
.field.summary span { color:#334155; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.command { height:34px; padding:0 13px; border:1px solid #b9c8da; border-radius:3px; background:#fff; color:#24364c; white-space:nowrap; }
.command:hover { background:#eef5ff; border-color:#7aa9dc; }
.command.primary { border-color:#1769c2; background:#1769c2; color:#fff; }
.command.primary:hover { background:#0d5cac; }
.command.small { height:30px; font-size:12px; }
.loading { min-height:260px; display:flex; justify-content:center; align-items:center; gap:10px; color:var(--muted); }
.loading span { width:18px; height:18px; border:2px solid #b5c9dd; border-top-color:var(--blue); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.view { display:none; }
.view.active { display:block; }
.section-head { display:flex; justify-content:space-between; align-items:end; padding:22px 0 14px; border-bottom:1px solid var(--line); margin-bottom:14px; }
.eyebrow { color:var(--blue); font-weight:700; font-size:12px; margin:0 0 5px; }
h1,h2,p { margin:0; } h1 { font-size:22px; line-height:1.2; } h2 { font-size:15px; line-height:1.2; } .muted { color:var(--muted); font-size:12px; }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.metric { min-height:106px; padding:16px; background:#fff; border:1px solid var(--line); border-top:3px solid var(--blue); box-shadow:var(--shadow); }
.metric:nth-child(2) { border-top-color:var(--orange); } .metric:nth-child(3) { border-top-color:var(--green); } .metric:nth-child(4) { border-top-color:var(--purple); }
.metric .label { color:var(--muted); font-size:12px; } .metric .value { margin-top:13px; font-size:23px; font-weight:750; } .metric .detail { margin-top:6px; color:#4e6177; font-size:12px; }
.split-grid { display:grid; grid-template-columns:1.35fr .85fr; gap:14px; margin-top:14px; } .split-grid.lower { grid-template-columns:1fr 1fr; }
.panel { background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); padding:15px; min-width:0; } .panel.full { margin-top:14px; }
.panel-head { display:flex; align-items:start; justify-content:space-between; gap:12px; padding-bottom:12px; border-bottom:1px solid #e8edf3; } .panel-head p { color:var(--muted); font-size:12px; margin-top:5px; }
.tag { color:#9a5615; background:#fff4dd; padding:4px 7px; font-size:11px; border:1px solid #f4d4a4; } .tag.amber { color:#9a5615; }
.number-pool { display:flex; flex-wrap:wrap; gap:8px; padding-top:14px; }
.number-chip { width:68px; min-height:58px; border:1px solid #d6e0ec; background:#fbfdff; display:flex; flex-direction:column; align-items:center; justify-content:center; } .number-chip b { font-size:18px; } .number-chip span { font-size:10px; color:var(--muted); margin-top:3px; }
.number-chip.hot { border-top:3px solid var(--red); } .number-chip.cool { border-top:3px solid var(--blue); }
.structure-list { display:grid; gap:10px; padding-top:14px; } .structure-line { display:flex; justify-content:space-between; padding-bottom:9px; border-bottom:1px dashed #d8e1eb; } .structure-line span { color:var(--muted); } .structure-line b { font-weight:700; }
.draw-list { padding-top:7px; } .draw-row { display:grid; grid-template-columns:54px 1fr auto; gap:8px; align-items:center; padding:7px 0; border-bottom:1px solid #edf1f5; font-size:12px; } .balls { display:flex; flex-wrap:wrap; gap:4px; }.ball { width:23px; height:23px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:700; color:#fff; background:var(--red); }.ball.back { background:var(--blue); }.ball.border { border:1px solid #e4a2a2; background:#fff; color:var(--red); }
.ai-chat-panel { display:flex; flex-direction:column; }
.chat-messages { min-height:186px; max-height:286px; overflow-y:auto; display:flex; flex-direction:column; gap:9px; padding:14px 0; }
.chat-message { max-width:92%; padding:9px 11px; border:1px solid #dbe4ee; background:#f8fbff; color:#32465c; line-height:1.6; white-space:pre-wrap; font-size:13px; }
.chat-message.user { align-self:flex-end; background:#eaf3ff; border-color:#b9d6f4; color:#173e69; }
.chat-message.assistant { align-self:flex-start; }
.chat-message.pending { color:var(--muted); }
.chat-compose { display:flex; gap:8px; border-top:1px solid #e8edf3; padding-top:12px; }
.chat-compose textarea { flex:1; min-height:52px; max-height:110px; resize:vertical; border:1px solid #bcc9d8; border-radius:3px; padding:8px 9px; font:inherit; line-height:1.45; outline:none; }
.chat-compose textarea:focus { border-color:var(--blue); box-shadow:0 0 0 2px rgba(23,105,194,.12); }
.chat-compose .command { align-self:flex-end; }
.bars { height:310px; display:flex; gap:5px; align-items:end; padding:20px 4px 25px; border-bottom:1px solid #ccd8e5; overflow-x:auto; }.bar-col { height:100%; min-width:21px; display:flex; flex-direction:column; align-items:center; justify-content:end; gap:5px; position:relative; }.bar { width:100%; background:var(--blue); min-height:4px; }.bar.hot { background:var(--red); }.bar-col b { font-size:10px; color:#40536a; }.bar-col span { font-size:10px; color:#708196; }.compact-bars .bar-col { min-width:30px; }
.rank-table { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; padding-top:14px; }.rank-cell { border:1px solid #d8e3ef; min-height:62px; padding:8px; display:flex; flex-direction:column; justify-content:space-between; }.rank-cell b { color:var(--blue); font-size:18px; }.rank-cell span { color:var(--muted); font-size:11px; }
.trend { height:260px; display:flex; align-items:end; gap:8px; padding:20px 4px 28px; border-bottom:1px solid #ccd8e5; }.trend-col { height:100%; flex:1; min-width:16px; display:flex; justify-content:end; flex-direction:column; align-items:center; gap:5px; }.trend-col i { display:block; width:100%; background:var(--orange); min-height:4px; }.trend-col span { font-style:normal; font-size:10px; color:var(--muted); }
.same-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding-top:14px; }.same-row { border:1px solid #dae4ee; padding:10px; }.same-row b { display:block; color:#516175; font-size:11px; margin-bottom:8px; }
.notice { border-left:3px solid var(--orange); background:#fff8ee; color:#795022; padding:11px 13px; margin-bottom:14px; line-height:1.55; }
.element-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:9px; padding-top:14px; }.element-cell { border:1px solid #d8e3ef; padding:13px 9px; text-align:center; }.element-cell b { display:block; font-size:18px; }.element-cell span { display:block; color:var(--muted); font-size:11px; margin-top:6px; }.element-cell:nth-child(1){border-top:3px solid #d4a525}.element-cell:nth-child(2){border-top:3px solid #2b9b64}.element-cell:nth-child(3){border-top:3px solid #2289c9}.element-cell:nth-child(4){border-top:3px solid #dc5a43}.element-cell:nth-child(5){border-top:3px solid #986d47}
.mapping-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; padding-top:14px; }.map-cell { border:1px solid #dce5ed; padding:9px; display:flex; justify-content:space-between; font-size:12px; }.map-cell b { color:var(--blue); }.map-cell span { color:var(--muted); }
.filter-grid { display:grid; grid-template-columns:repeat(4,1fr) auto; align-items:end; gap:12px; background:#fff; border:1px solid var(--line); padding:14px; box-shadow:var(--shadow); }.combo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding-top:14px; }.combo { border:1px solid #d7e2ee; padding:14px; border-top:3px solid var(--blue); }.combo h3 { margin:0 0 9px; font-size:14px; }.combo p { margin-top:10px; color:var(--muted); line-height:1.5; font-size:12px; }.combo .balls { min-height:27px; }
.football-toolbar { display:flex; align-items:end; gap:12px; padding:14px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); }
.football-toolbar .football-search-field { flex:1; }
.football-notice { margin-top:14px; }
.football-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; padding-top:14px; }
.football-card { min-width:0; border:1px solid #d7e2ee; border-top:3px solid var(--blue); padding:14px; background:#fbfdff; }
.football-card-head { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:11px; }
.football-number { color:var(--blue); font-weight:800; }
.football-league { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.football-time { white-space:nowrap; }
.football-teams { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; padding:22px 4px; text-align:center; }
.football-teams b { font-size:16px; overflow-wrap:anywhere; }
.football-teams span { color:var(--muted); font-size:11px; }
.football-odds { display:grid; grid-template-columns:repeat(3, 1fr); gap:7px; }
.football-odd { border:1px solid #dbe4ee; padding:9px 6px; text-align:center; background:#fff; }
.football-odd span, .football-odd small { display:block; color:var(--muted); font-size:11px; }
.football-odd b { display:block; margin:5px 0; color:var(--ink); font-size:18px; }
.football-odd small { font-size:10px; }
.football-no-odds, .empty-state { padding:28px 12px; color:var(--muted); text-align:center; line-height:1.7; }
.empty-state span { font-size:12px; }
.football-card-foot { display:flex; justify-content:space-between; gap:10px; margin-top:12px; color:var(--muted); font-size:11px; }
.football-card-foot strong { color:var(--red); }
@media (max-width: 900px) { .topbar { padding:0 16px; }.layout { padding:12px; }.control-band { align-items:stretch; flex-wrap:wrap; }.field.summary { order:4; flex-basis:100%; }.metrics,.split-grid,.split-grid.lower,.filter-grid,.combo-grid { grid-template-columns:1fr 1fr; }.nav { padding:0; }.nav-item { min-width:auto; padding:0 13px; }.same-grid { grid-template-columns:1fr 1fr; } }
@media (max-width: 580px) { .source-status { display:none; }.metrics,.split-grid,.split-grid.lower,.filter-grid,.combo-grid,.football-grid { grid-template-columns:1fr; }.football-toolbar { align-items:stretch; flex-wrap:wrap; }.football-toolbar .field { flex:1; min-width:130px; }.section-head { align-items:start; flex-direction:column; gap:5px; }.rank-table { grid-template-columns:repeat(4,1fr); }.mapping-grid { grid-template-columns:repeat(4,1fr); }.element-grid { grid-template-columns:repeat(3,1fr); }.control-band .field { flex:1; }.command { flex:1; } }