:root { color-scheme: light; --ink:#182033; --muted:#748096; --line:#e7eaf2; --red:#e5484d; --blue:#2f7cf6; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); font-family:Inter,"Microsoft YaHei",sans-serif; background:linear-gradient(145deg,#f7f8fc,#fff 55%,#eef4ff); }
.app-shell { width:min(1120px,calc(100% - 32px)); margin:0 auto; padding:48px 0 28px; }
.hero,.panel-heading,.latest-card,.stats-grid { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.eyebrow,.section-label { margin:0 0 7px; color:#6d778d; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
h1 { margin:0; font-size:42px; letter-spacing:-2px; } h2 { margin:0; font-size:22px; }
.subtitle,.muted { color:var(--muted); }.subtitle { margin:8px 0 0; }.muted { font-size:14px; margin-bottom:0; }
.sync-status { border:1px solid var(--line); border-radius:999px; background:white; padding:10px 14px; font-size:13px; box-shadow:0 8px 30px rgba(35,45,80,.06); }
.status-dot { display:inline-block; width:8px; height:8px; margin-right:7px; border-radius:50%; background:#ffb020; box-shadow:0 0 0 4px #fff2d7; }
.sync-status.online .status-dot { background:#25b66f; box-shadow:0 0 0 4px #daf6e8; }
.sync-status.error .status-dot { background:#8d93a2; box-shadow:0 0 0 4px #eceef3; }
.latest-card,.panel,.stats-grid article { background:rgba(255,255,255,.92); border:1px solid var(--line); border-radius:20px; box-shadow:0 16px 50px rgba(42,52,92,.07); }
.latest-card { margin-top:28px; padding:26px 30px; }.latest-card h2 { font-size:24px; }
.ball-row { display:flex; flex-wrap:wrap; gap:10px; }.ball { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; color:white; font-weight:800; box-shadow:inset 0 -4px 8px rgba(0,0,0,.12); }.ball.red { background:var(--red); }.ball.blue { background:var(--blue); }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); margin:18px 0 18px; }.stats-grid article { padding:18px 20px; }.stats-grid span { display:block; color:var(--muted); font-size:13px; margin-bottom:8px; }.stats-grid strong { font-size:20px; }
.panel { margin-top:18px; padding:24px 30px; }.legend { display:flex; gap:16px; color:var(--muted); font-size:13px; }.legend i { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; }.red-key { background:var(--red); }.blue-key { background:var(--blue); }
.frequency-chart { height:230px; margin-top:24px; display:flex; align-items:flex-end; gap:4px; border-bottom:1px solid var(--line); overflow:hidden; }.freq-column { flex:1; height:100%; display:flex; align-items:flex-end; justify-content:center; position:relative; min-width:4px; }.freq-bar { width:55%; max-width:14px; min-width:3px; border-radius:4px 4px 0 0; background:var(--red); opacity:.82; }.freq-column:hover .freq-bar { opacity:1; }.freq-column:hover::after { content:attr(data-tip); position:absolute; bottom:calc(var(--height) + 4px); z-index:2; background:#20283a; color:white; font-size:11px; white-space:nowrap; border-radius:5px; padding:5px 7px; }
.table-wrap { overflow:auto; margin-top:20px; max-height:520px; border-top:1px solid var(--line); } table { width:100%; border-collapse:collapse; } th { position:sticky; top:0; z-index:1; background:#fff; text-align:left; color:var(--muted); font-size:12px; letter-spacing:.05em; } th,td { padding:15px 12px; border-bottom:1px solid var(--line); } tbody tr:hover { background:#fafbfe; }.number-pill { display:inline-grid; place-items:center; width:30px; height:30px; margin-right:6px; border-radius:50%; color:white; font-size:12px; font-weight:700; }.number-pill.red { background:var(--red); }.number-pill.blue { background:var(--blue); }.empty { text-align:center; color:var(--muted); padding:40px; }
footer { padding:26px 4px 0; color:#9199aa; font-size:12px; text-align:center; }
@media (max-width:720px) { .app-shell { width:min(100% - 20px,1120px); padding-top:28px; } .hero { align-items:flex-start; } h1 { font-size:34px; }.latest-card { align-items:flex-start; flex-direction:column; }.stats-grid { grid-template-columns:repeat(2,1fr); }.panel,.latest-card { padding:20px; }.ball { width:42px; height:42px; }.table-wrap { max-height:430px; } }