:root { color-scheme: dark; font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif; background: #06101f; color: #e9f3ff; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 980px; min-height: 100vh; background: #06101f; }
button { font: inherit; }
.board { min-height: 100vh; padding: 22px 32px 28px; background-image: linear-gradient(rgba(56, 133, 208, .075) 1px, transparent 1px), linear-gradient(90deg, rgba(56, 133, 208, .075) 1px, transparent 1px), radial-gradient(ellipse at 50% -25%, rgba(19, 71, 148, .42), transparent 56%); background-size: 48px 48px, 48px 48px, 100% 100%; }
.board-header { height: 82px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; border-bottom: 1px solid rgba(63, 174, 255, .38); position: relative; }
.board-header::after { content: ""; position: absolute; width: 38%; height: 2px; left: 31%; bottom: -1px; background: #53d7ff; box-shadow: 0 0 16px #53d7ff; }
.header-side { display: flex; gap: 14px; align-items: baseline; color: #aac5de; padding-top: 10px; font-size: 13px; }
.header-side time { color: #e8f7ff; font-size: 24px; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.header-right { justify-content: flex-end; align-items: center; gap: 18px; }
.live { display: flex; align-items: center; gap: 8px; color: #b9d8ef; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: #51efc2; box-shadow: 0 0 10px #51efc2; }
.has-error .live i { background: #ff8b61; box-shadow: 0 0 10px #ff8b61; }
#fullscreen { border: 1px solid rgba(88, 201, 255, .45); background: rgba(31, 99, 156, .16); color: #e4f5ff; min-width: 66px; min-height: 34px; cursor: pointer; }
#fullscreen:hover, #fullscreen:focus-visible { border-color: #66d8ff; background: rgba(64, 157, 222, .25); outline: none; }
.brand { display: flex; gap: 22px; align-items: center; justify-content: center; color: #eff9ff; }
.brand h1 { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: 2px; white-space: nowrap; text-shadow: 0 0 22px rgba(74, 202, 255, .65); }
.brand span { width: 54px; height: 1px; background: linear-gradient(90deg, transparent, #4bcbff); }.brand span:last-child { transform: rotateY(180deg); }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 20px 0 16px; }
.metric, .panel { border: 1px solid rgba(69, 167, 246, .28); background: linear-gradient(125deg, rgba(12, 39, 76, .82), rgba(7, 22, 47, .86)); position: relative; overflow: hidden; }
.metric::before, .panel::before { content: ""; position: absolute; width: 42px; height: 42px; border-top: 2px solid var(--accent, #55d9ff); border-left: 2px solid var(--accent, #55d9ff); top: -1px; left: -1px; opacity: .85; }
.metric { min-height: 146px; padding: 20px 24px; --accent: #5be0ff; }.metric.is-violet { --accent: #b18aff; }.metric.is-mint { --accent: #61efca; }.metric.is-amber { --accent: #ffca72; }
.metric p, .metric small { display: block; margin: 0; color: #a8c7e0; font-size: 14px; }.metric strong { display: block; margin: 10px 0 8px; color: var(--accent); font-size: clamp(26px, 2.4vw, 45px); line-height: 1; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: 0; text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 50%, transparent); }.metric small { font-size: 12px; color: #7394b6; }
.content-grid { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 16px; }.panel { min-height: 284px; padding: 18px 20px; }.panel-title { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding-bottom: 14px; border-bottom: 1px solid rgba(91, 178, 239, .2); }.panel-title h2 { margin: 0; font-size: 17px; font-weight: 550; }.panel-title span { color: #78a0bf; font-size: 12px; }
.task-split { display: grid; grid-template-columns: 155px 1fr; gap: 18px; align-items: center; min-height: 180px; }.donut { width: 145px; height: 145px; border-radius: 50%; background: conic-gradient(#936eff 0 var(--running-share, 0%), #4cddff var(--running-share, 0%) 100%); box-shadow: 0 0 28px rgba(85, 197, 255, .18); position: relative; }.donut::before { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: #0a1e3e; }.donut div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }.donut strong { font-size: 30px; color: #eaf8ff; font-variant-numeric: tabular-nums; }.donut span { font-size: 12px; color: #90b2ca; margin-top: 4px; }.task-legend { display: grid; gap: 16px; }.task-legend > div { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 9px; }.dot { height: 8px; width: 8px; border-radius: 50%; }.dot.cyan { background: #4cddff; box-shadow: 0 0 10px #4cddff; }.dot.violet { background: #936eff; box-shadow: 0 0 10px #936eff; }.task-legend p { margin: 0; font-size: 14px; }.task-legend small { display: block; margin-top: 3px; color: #779ab8; font-size: 11px; }.task-legend strong { font-size: 26px; color: #e9f7ff; font-variant-numeric: tabular-nums; }.status-line { position: absolute; left: 20px; right: 20px; bottom: 17px; display: flex; justify-content: space-between; font-size: 12px; color: #7899b7; border-top: 1px solid rgba(91, 178, 239, .16); padding-top: 12px; }.status-line b { color: #a9d8f4; font-weight: 500; }
.success-layout { min-height: 180px; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 14px; }.success-number strong { display: block; color: #61efca; font-size: 48px; line-height: 1; font-variant-numeric: tabular-nums; }.success-number span { display: block; margin-top: 9px; color: #91b4ce; font-size: 13px; }.bar-chart { height: 140px; display: flex; gap: 26px; align-items: end; padding-bottom: 23px; border-bottom: 1px solid rgba(119, 183, 239, .24); }.bar-chart > div { height: 100%; display: grid; grid-template-rows: 1fr auto auto; align-items: end; justify-items: center; gap: 7px; flex: 1; }.bar-chart i { width: 28px; min-height: 8px; background: linear-gradient(#6aefce, #2e9dd3); box-shadow: 0 0 14px rgba(83, 231, 198, .55); }.bar-chart .failure-bar { background: linear-gradient(#ff8a85, #bd5f9e); box-shadow: 0 0 14px rgba(255, 126, 137, .45); }.bar-chart span { color: #8fb2ca; font-size: 12px; }.bar-chart b { color: #dceeff; font-variant-numeric: tabular-nums; }
.alert-list { padding-top: 14px; display: grid; gap: 9px; }.alert { border-left: 3px solid #ffbd65; background: rgba(255, 173, 76, .08); min-height: 43px; display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; color: #e7f4ff; font-size: 13px; }.alert.is-critical { border-color: #ff7878; background: rgba(255, 102, 102, .09); }.alert strong { color: #ffcc81; font-size: 19px; font-variant-numeric: tabular-nums; }.alert.is-critical strong { color: #ff9a9a; }.loading, .all-clear { color: #84a8c3; margin: 8px 0; font-size: 13px; }.all-clear { color: #6be9c8; }
.summary-panel { min-height: 0; margin-top: 16px; padding-bottom: 20px; }.summary-grid { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 19px; }.summary-grid > div { padding: 0 18px; border-right: 1px solid rgba(95, 173, 229, .18); }.summary-grid > div:last-child { border: 0; }.summary-grid span { color: #88a9c4; display: block; font-size: 12px; }.summary-grid strong { color: #ebf7ff; font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; display: block; margin-top: 7px; }
@media (max-width: 1180px) { .board { padding-inline: 20px; }.metric { padding-inline: 17px; }.content-grid { grid-template-columns: 1fr 1fr; }.alert-panel { grid-column: span 2; min-height: 160px; }.alert-list { grid-template-columns: repeat(2, 1fr); }.summary-grid > div { padding-inline: 12px; } }