*{box-sizing:border-box}
:root{font-family:Arial,Helvetica,sans-serif;color:#073b67;background:#f5fbfc}
body{margin:0;min-height:100vh}
.page{max-width:1150px;margin:auto;padding:42px 24px}
.hero{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:30px}
.eyebrow{margin:0 0 8px;color:#0795a5;font-size:.78rem;font-weight:800;letter-spacing:.18em}
h1{margin:0;font-size:clamp(2.2rem,6vw,4.6rem);letter-spacing:-.04em}
.subtitle{margin:8px 0 0;font-size:1.1rem;color:#52728b;font-weight:700}
.status-pill{white-space:nowrap;padding:11px 17px;border-radius:999px;background:#e9eef2;color:#526776;font-size:.8rem;font-weight:900;letter-spacing:.1em}
.status-pill span{display:inline-block;width:9px;height:9px;border-radius:50%;background:#81909a;margin-right:7px}
.status-pill.online{background:#e6f8f4;color:#087d73}.status-pill.online span{background:#12a889}
.status-pill.offline{background:#fff0f0;color:#a33}.status-pill.offline span{background:#d33}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:#fff;border:1px solid #dcecef;border-radius:18px;padding:25px;box-shadow:0 8px 28px rgba(7,59,103,.07)}
.metric{min-height:170px}.label{font-size:.75rem;font-weight:900;letter-spacing:.14em;color:#678294}
.value{font-size:3.2rem;font-weight:900;letter-spacing:-.04em;margin:20px 0 15px}
.bar{height:9px;background:#e8f1f3;border-radius:10px;overflow:hidden}.bar i{display:block;height:100%;width:0;background:#0795a5;border-radius:10px;transition:width .5s ease}
.lower{margin-top:18px}.service,.info{font-size:1.55rem;font-weight:900;margin-top:18px}.service b{color:#0795a5}.service.good b{color:#12a889}.service.bad b{color:#d33}
.details{margin-top:18px}.details-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:22px}.details-grid span{display:block;font-size:.7rem;letter-spacing:.1em;color:#8298a6;font-weight:800;margin-bottom:7px}.details-grid strong{font-size:1rem;word-break:break-word}
footer{text-align:center;margin:35px 0 5px;color:#76909e;font-size:.78rem;letter-spacing:.12em;font-weight:800}
@media(max-width:760px){.hero{align-items:flex-start;flex-direction:column}.cards{grid-template-columns:1fr}.details-grid{grid-template-columns:1fr 1fr}}
.test-panel {
  text-align: center;
  margin: 0 0 30px;
}

.cpu-test-button {
  display: inline-block;
  padding: 16px 30px;
  background: #073b67;
  color: #ffffff;
  border: 2px solid #073b67;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cpu-test-button:hover {
  background: #0795a5;
  border-color: #0795a5;
  transform: translateY(-2px);
}

.cpu-test-button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

.test-status {
  margin: 10px 0 0;
  font-size: 0.8rem;
  opacity: 0.7;
}