:root {
  --bg: #070b14;
  --panel: rgba(255, 255, 255, 0.065);
  --panel-strong: rgba(255, 255, 255, 0.09);
  --panel-soft: rgba(255, 255, 255, 0.045);
  --border: rgba(255, 255, 255, 0.11);

  --text: #eef5ff;
  --muted: #9aa8bc;

  --green: #67e8a5;
  --yellow: #ffd166;
  --red: #ff6b6b;
  --accent: #8fb7ff;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  background:
    radial-gradient(circle at 12% 0%, rgba(143, 183, 255, 0.18), transparent 36%),
    radial-gradient(circle at 88% 12%, rgba(103, 232, 165, 0.08), transparent 30%),
    linear-gradient(180deg, #07101d 0%, #070b14 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 35% 20%, rgba(143, 183, 255, 0.08), transparent 28%),
    radial-gradient(circle at 70% 80%, rgba(255, 209, 102, 0.055), transparent 34%);
  opacity: 0.75;
  animation: ambientMove 70s ease-in-out infinite alternate;
}

@keyframes ambientMove {
  from {
    transform: translate3d(-2%, -1%, 0) scale(1);
  }

  to {
    transform: translate3d(2%, 1%, 0) scale(1.05);
  }
}

.page {
  width: min(1480px, calc(100% - 48px));
  margin: 0 auto;
  padding: 28px 0;
  position: relative;
  z-index: 1;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(3.1rem, 6vw, 5.9rem);
  line-height: 0.9;
  letter-spacing: -0.07em;
}

.subtitle {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 1.05rem;
}

.overall {
  width: fit-content;
  margin: 26px 0 22px;
  padding: 12px 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.status-strip {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.status-pill {
  padding: 12px 16px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.status-pill strong {
  color: var(--text);
}

.status-pill::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--green);
  box-shadow:
    0 0 8px rgba(103, 232, 165, 0.65),
    0 0 18px rgba(103, 232, 165, 0.18);
}

.dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--yellow);
}

.dot.green {
  background: var(--green);
  box-shadow:
    0 0 10px rgba(103, 232, 165, 0.68),
    0 0 20px rgba(103, 232, 165, 0.22);
}

.dot.yellow {
  background: var(--yellow);
  box-shadow:
    0 0 10px rgba(255, 209, 102, 0.6),
    0 0 20px rgba(255, 209, 102, 0.18);
}

.dot.red {
  background: var(--red);
  box-shadow:
    0 0 10px rgba(255, 107, 107, 0.72),
    0 0 20px rgba(255, 107, 107, 0.24);
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.card {
  min-height: 454px;
  padding: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.045));
  border: 1px solid var(--border);
  border-radius: 30px;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.31),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(20px);
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.17);
  box-shadow:
    0 26px 90px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(255, 255, 255, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.label {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.card h2 {
  margin: 0;
  font-size: 1.85rem;
  letter-spacing: -0.03em;
}

.icon {
  font-size: 2.45rem;
  line-height: 1;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.22));
}

.big {
  display: flex;
  align-items: flex-end;
  gap: 0;
  margin: 34px 0 14px;
  font-size: clamp(4.4rem, 7vw, 6.25rem);
  font-weight: 850;
  line-height: 0.85;
  letter-spacing: -0.08em;
  color: var(--text);
  transition: color 0.35s ease;
}

.unit {
  margin-bottom: 0.04em;
  color: inherit;
  font-size: 0.82em;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: -0.06em;
}

.metric-title {
  margin: 0 0 12px;
  color: var(--muted);
  font-weight: 500;
}

.muted {
  color: var(--muted);
}

.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 28px;
}

.metrics div {
  min-height: 78px;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.13));
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.metrics span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.metrics strong {
  font-size: 1.35rem;
  line-height: 1.1;
}

.footer {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  color: var(--muted);
  font-weight: 650;
}

.sparkline {
  position: relative;
  height: 46px;
  margin: 16px 0 8px;
  opacity: 0.92;
}

.sparkline-meta {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.sparkline svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.sparkline path.line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.72;
}

.sparkline path.area {
  fill: currentColor;
  opacity: 0.10;
}

.sparkline circle {
  fill: currentColor;
  opacity: 0.9;
}

.sparkline .hover-target { fill: transparent; pointer-events: all; cursor: crosshair; }
.sparkline .hover-line { stroke: rgba(255,255,255,.55); stroke-width: 1; stroke-dasharray: 2 2; opacity: 0; }
.sparkline .hover-point { fill: var(--text); stroke: currentColor; stroke-width: 1.5; opacity: 0; }
.sparkline .hover-line.visible, .sparkline .hover-point.visible { opacity: 1; }
.sparkline-tooltip { position:absolute; z-index:5; bottom:54px; transform:translateX(-50%); padding:7px 10px; border:1px solid var(--border); border-radius:10px; background:#101a29; color:var(--text); box-shadow:0 10px 30px rgba(0,0,0,.35); font-size:.75rem; font-weight:750; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .12s ease; }
.sparkline-tooltip.visible { opacity:1; }

.timeline-panel { margin-top:22px; padding:28px; background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.04)); border:1px solid var(--border); border-radius:30px; box-shadow:0 24px 80px rgba(0,0,0,.28); }
.timeline-header { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.timeline-header h2 { margin:0; font-size:1.85rem; }
.timeline-filters { display:flex; flex-wrap:wrap; gap:8px; }
.timeline-filters button { padding:9px 13px; border:1px solid var(--border); border-radius:999px; background:var(--panel-soft); color:var(--muted); font:inherit; font-size:.78rem; font-weight:750; cursor:pointer; }
.timeline-filters button:hover, .timeline-filters button.active { color:var(--text); border-color:rgba(143,183,255,.5); background:rgba(143,183,255,.13); }
.timeline { margin:26px 0 0; padding:0; list-style:none; }
.timeline-event { position:relative; display:grid; grid-template-columns:18px 1fr; gap:14px; padding-bottom:22px; }
.timeline-event:not(:last-child)::before { content:""; position:absolute; left:5px; top:13px; bottom:0; width:1px; background:var(--border); }
.timeline-marker { position:relative; z-index:1; width:11px; height:11px; margin-top:5px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 5px rgba(143,183,255,.1); }
.timeline-event.warning .timeline-marker { background:var(--yellow); box-shadow:0 0 0 5px rgba(255,209,102,.1); }
.timeline-event.critical .timeline-marker { background:var(--red); box-shadow:0 0 0 5px rgba(255,107,107,.1); }
.timeline-event.success .timeline-marker { background:var(--green); box-shadow:0 0 0 5px rgba(103,232,165,.1); }
.timeline-title { display:flex; justify-content:space-between; gap:18px; }
.timeline-title time { color:var(--muted); font-size:.78rem; white-space:nowrap; }
.timeline-content p { margin:6px 0 0; color:var(--muted); line-height:1.45; }
.timeline-empty { padding:24px; border:1px dashed var(--border); border-radius:18px; color:var(--muted); text-align:center; }

#weatherBig + .sparkline,
#networkBig + .sparkline,
#serverBig + .sparkline {
  color: inherit;
}

.card:has(#weatherBig) .sparkline {
  color: inherit;
}

.card:has(#networkBig) .sparkline {
  color: inherit;
}

.card:has(#serverBig) .sparkline {
  color: inherit;
}

#serverUptime {
  white-space: nowrap;
  font-size: 1.12rem;
}

@media (max-width: 1100px) {
  .grid {
    grid-template-columns: 1fr;
  }

  .card {
    min-height: auto;
  }

  .footer {
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 640px) {
  .page {
    width: min(100% - 28px, 1480px);
    padding: 22px 0;
  }

  h1 {
    font-size: clamp(2.6rem, 15vw, 4rem);
  }

  .big {
    font-size: clamp(4rem, 20vw, 5.2rem);
  }

  .metrics {
    grid-template-columns: repeat(2, 1fr);
  }
  .timeline-panel { padding:20px; border-radius:24px; }
  .timeline-header, .timeline-title { flex-direction:column; gap:12px; }
}
.speedtest {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 26px;
}

.speed {
    padding: 14px;
    border-radius: 18px;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.025)
        );

    border: 1px solid rgba(255,255,255,.05);
}

.speed-label {
    display:block;

    margin-bottom:8px;

    color:var(--muted);

    font-size:.72rem;

    letter-spacing:.08em;

    text-transform:uppercase;
}

.speed strong{
    font-size:1.45rem;

    font-weight:800;

    letter-spacing:-.03em;
}