:root { color-scheme: dark; font-family: "Microsoft YaHei UI", "Segoe UI", sans-serif; background: #0d0f12; color: #f3f5f7; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input { font: inherit; }
button { cursor: pointer; }
.app-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100vh; }
.sidebar { display: flex; flex-direction: column; min-height: 100vh; padding: 22px 14px; background: #14171c; border-right: 1px solid #2a2e36; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 8px 26px; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; background: #3478f6; color: #fff; border-radius: 8px; font-weight: 800; font-size: 13px; }
.brand strong { display: block; font-size: 15px; letter-spacing: 0; }.brand small { display: block; margin-top: 3px; color: #8e96a3; font-size: 12px; }
.sidebar-heading { display: flex; justify-content: space-between; align-items: center; padding: 0 8px 9px; color: #9da5b3; font-size: 12px; }
.text-button { border: 0; background: transparent; color: #79a6ff; padding: 4px; }
.channel-list { display: grid; gap: 4px; overflow: auto; }.channel-item { display: grid; grid-template-columns: 1fr auto; gap: 6px; width: 100%; padding: 11px 8px; border: 0; border-radius: 6px; background: transparent; color: #c8ced8; text-align: left; }.channel-item > button { min-width: 0; border: 0; background: transparent; color: inherit; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.channel-item:hover { background: #20242b; }.channel-item.active { background: #263b60; color: #fff; }.channel-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.channel-actions { display: flex; gap: 3px; }.channel-actions button { border: 0; background: transparent; color: #aeb7c7; padding: 1px 5px; font-size: 12px; }.channel-actions button:hover { color: #fff; }
.sidebar-foot { margin-top: auto; padding: 16px 8px 0; border-top: 1px solid #292d34; color: #7f8794; font-size: 12px; line-height: 1.55; }
.main-content { min-width: 0; padding: 30px 38px 42px; background: #0d0f12; }.topbar, .controls, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }.topbar { margin-bottom: 28px; }.eyebrow { margin: 0 0 6px; color: #7f91ae; font-size: 12px; }.topbar h1, h2 { margin: 0; letter-spacing: 0; }.topbar h1 { font-size: 27px; }.section-heading h2 { font-size: 17px; }.section-heading > span { color: #8b93a0; font-size: 12px; }
.sync-state { padding: 7px 10px; border: 1px solid #343942; border-radius: 5px; color: #aeb5c1; font-size: 12px; }.sync-state[data-state="live"] { border-color: #346452; color: #7ed2ad; }.sync-state[data-state="stale"] { border-color: #705a2c; color: #e1bd6d; }.sync-state[data-state="error"] { border-color: #713e49; color: #e38e9a; }
.controls { flex-wrap: wrap; padding: 13px; margin-bottom: 20px; background: #171a1f; border: 1px solid #282d35; border-radius: 7px; }.controls label { color: #a6aebc; font-size: 13px; }.controls input { margin-left: 8px; padding: 7px 9px; min-height: 34px; border: 1px solid #3a404a; border-radius: 5px; background: #22262d; color: #f4f6f8; }
.primary-button, .secondary-button, .view-switch button { min-height: 34px; padding: 0 12px; border-radius: 5px; }.primary-button { border: 1px solid #3478f6; background: #3478f6; color: #fff; }.primary-button:hover { background: #4a88f9; }.secondary-button { border: 1px solid #3b414b; background: #252a31; color: #d7dce5; }.secondary-button:hover { background: #303640; }.view-switch { display: flex; gap: 2px; margin-left: auto; padding: 3px; background: #111419; border: 1px solid #2d323b; border-radius: 6px; }.view-switch button { border: 0; background: transparent; color: #9da5b3; }.view-switch button.active { background: #303742; color: #fff; }
.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 12px; }.metric { padding: 16px; background: #171a1f; border: 1px solid #282d35; border-radius: 7px; }.metric span { color: #a1a9b7; font-size: 12px; }.metric strong { display: block; margin-top: 9px; font-size: 27px; font-variant-numeric: tabular-nums; }.metric:nth-child(1) strong { color: #8bb4ff; }.metric:nth-child(2) strong { color: #75d6c1; }.metric:nth-child(3) strong { color: #f0bd75; }.metric:nth-child(4) strong { color: #d99db7; }
.notice { margin: 14px 0; padding: 10px 12px; border: 1px solid #685a37; border-radius: 5px; background: #262218; color: #e2c884; font-size: 13px; }.notice[data-state="unavailable"] { border-color: #6a3c47; background: #271b20; color: #e3a4af; }
.table-view, .chart-view { margin-top: 24px; padding: 18px; background: #171a1f; border: 1px solid #282d35; border-radius: 7px; }.version-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }.version-card { overflow: hidden; border: 1px solid #2b3039; border-radius: 6px; background: #13161a; }.version-card h3 { margin: 0; padding: 12px 13px; font-size: 14px; }.version-card table { width: 100%; border-collapse: collapse; }.version-card th, .version-card td { padding: 9px 13px; border-top: 1px solid #272c33; font-size: 13px; text-align: left; }.version-card th { color: #9099a7; font-size: 12px; font-weight: 500; }.version-card td:last-child, .version-card th:last-child { text-align: right; font-variant-numeric: tabular-nums; }.version-card .muted { color: #7d8694; text-align: center; }
.pie-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 20px; }.pie-card { display: grid; grid-template-columns: 172px 1fr; align-items: center; gap: 20px; min-height: 210px; padding: 18px; border: 1px solid #2b3039; border-radius: 6px; background: #13161a; }.pie { width: 172px; aspect-ratio: 1; border-radius: 50%; position: relative; }.pie::after { content: "系统版本"; display: grid; place-items: center; position: absolute; inset: 31%; border-radius: 50%; background: #13161a; color: #a7aebb; font-size: 12px; text-align: center; }.legend { display: grid; gap: 8px; }.legend-row { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 7px; color: #bac1cc; font-size: 12px; }.legend-dot { width: 9px; height: 9px; border-radius: 50%; }.legend-row strong { font-variant-numeric: tabular-nums; font-weight: 600; color: #f2f3f5; }.no-chart { color: #7f8793; font-size: 13px; }
dialog { width: min(480px, calc(100vw - 32px)); border: 1px solid #343a44; border-radius: 8px; padding: 0; background: #181b20; color: #f1f3f5; box-shadow: 0 18px 70px #000a; } dialog::backdrop { background: #050609aa; } dialog form { display: grid; gap: 14px; padding: 20px; }.dialog-heading { display: flex; justify-content: space-between; align-items: start; }.dialog-heading h2 { font-size: 19px; }.icon-button { width: 30px; height: 30px; border: 1px solid #363c46; border-radius: 5px; background: #242931; color: #c9cfda; }.icon-button:hover { color: #fff; }.dialog-heading + input, dialog label { display: grid; gap: 7px; color: #afb7c4; font-size: 13px; } dialog input { padding: 10px; border: 1px solid #3a414c; border-radius: 5px; background: #111419; color: #f2f4f6; }.dialog-actions { display: flex; justify-content: end; gap: 8px; padding-top: 4px; }.form-error { margin: 0; color: #eb98a5; font-size: 13px; }
@media (max-width: 860px) { .app-shell { grid-template-columns: 1fr; }.sidebar { min-height: auto; border-right: 0; border-bottom: 1px solid #2a2e36; }.channel-list { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); max-height: 160px; }.sidebar-foot { display: none; }.main-content { padding: 22px 16px 32px; }.summary-grid, .version-grid, .pie-grid { grid-template-columns: 1fr; }.pie-card { grid-template-columns: 130px 1fr; }.pie { width: 130px; }.topbar h1 { font-size: 22px; } }
@media (max-width: 520px) { .topbar { align-items: flex-start; flex-direction: column; }.controls { align-items: center; }.view-switch { width: 100%; margin-left: 0; }.view-switch button { flex: 1; }.pie-card { grid-template-columns: 1fr; justify-items: center; }.legend { width: 100%; } }