:root { color-scheme: light; font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; color: #172033; background: #f3f5f8; }
* { box-sizing: border-box; }
body { margin: 0; background: #f3f5f8; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:20px 34px; background:#fff; border-bottom:1px solid #e5e9f0; }
.topbar p { margin:0 0 4px; color:#6f7f98; font-size:11px; letter-spacing:.12em; }
.topbar h1 { margin:0; font-size:25px; }
.status { padding:8px 12px; border-radius:8px; color:#315b91; background:#eaf2fc; font-size:13px; }
main { width:min(1440px, calc(100% - 48px)); margin:24px auto 56px; }
.panel { padding:24px; border:1px solid #e1e6ed; border-radius:12px; background:#fff; }
.heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.heading > div:first-child { display:flex; align-items:center; gap:10px; }
.heading span { color:#507bb4; font-size:12px; font-weight:700; }
h2 { margin:0; font-size:20px; }
.filters { display:flex; align-items:center; gap:12px; }
label { display:flex; align-items:center; gap:7px; color:#667085; font-size:12px; }
select { min-width:110px; padding:8px 28px 8px 10px; border:1px solid #d6dce5; border-radius:8px; background:#fff; color:#344054; }
.empty { display:grid; place-items:center; min-height:360px; margin-top:20px; border:1px dashed #cfd8e5; border-radius:12px; background:#fafbfd; text-align:center; color:#667085; }
.empty strong { display:block; margin-bottom:8px; color:#344054; font-size:18px; }
.empty p { margin:0; }
@media (max-width:760px) { .topbar,.heading { align-items:flex-start; flex-direction:column; } .filters { align-items:flex-start; flex-direction:column; } main { width:calc(100% - 24px); } }