:root { color-scheme: light dark; font-family: Inter, "Segoe UI", sans-serif; background: #f5f7f8; color: #182126; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
header { min-height: 56px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; background: #172126; color: #f7fbfc; border-bottom: 3px solid #25a18e; }
header strong { font-size: 18px; }
header span { margin-left: 12px; color: #a9bcc3; font-family: ui-monospace, monospace; font-size: 12px; }
header time { color: #c9d6da; font-size: 13px; }
main { width: min(1180px, calc(100% - 32px)); margin: 28px auto 56px; }
h1 { font-size: 28px; margin: 0 0 18px; }
h2 { font-size: 18px; margin: 30px 0 12px; }
#status { padding: 12px 0; color: #53666e; }
.summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #cad5d9; background: #fff; }
.metric { min-width: 0; padding: 16px; border-right: 1px solid #dbe3e6; }
.metric:last-child { border-right: 0; }
.metric small { display: block; color: #60747c; margin-bottom: 6px; }
.metric strong { font-size: 22px; overflow-wrap: anywhere; }
.table-wrap { overflow-x: auto; border: 1px solid #cad5d9; background: #fff; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 10px 12px; text-align: right; border-bottom: 1px solid #e1e7e9; white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
th { background: #eef3f4; color: #40535b; font-weight: 600; }
tbody tr:last-child td { border-bottom: 0; }
.uuid { display: block; margin-top: 2px; color: #809097; font: 11px ui-monospace, monospace; }
.section { margin-bottom: 18px; }
.section h3 { margin: 0; padding: 10px 12px; font-size: 15px; background: #26353b; color: #fff; }
.section p { margin: 0; padding: 10px 12px; color: #5c6f77; background: #eef3f4; font-size: 13px; }
@media (max-width: 760px) { header { padding: 0 16px; } header time { display: none; } main { width: calc(100% - 20px); margin-top: 20px; } .summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .metric:nth-child(2) { border-right: 0; } .metric:nth-child(-n+2) { border-bottom: 1px solid #dbe3e6; } }
@media (prefers-color-scheme: dark) { :root { background: #101619; color: #e6edef; } .summary, .table-wrap { background: #172126; border-color: #35464d; } .metric, th, td { border-color: #2e3e44; } th, .section p { background: #202d32; color: #c0cdd1; } #status { color: #a6b8be; } }