:root {
  --glass: rgba(255, 255, 255, 0.07);
  --glass-brd: rgba(255, 255, 255, 0.14);
  --txt: #eef1ff;
  --txt-dim: #9aa3c7;
  --radius: 22px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  color: var(--txt);
  min-height: 100vh;
  background: #0a0a18;
  background: radial-gradient(1200px 800px at 80% -10%, #1b1b46 0%, #0a0a18 55%),
              radial-gradient(900px 700px at -10% 110%, #2a1140 0%, transparent 60%);
  overflow-x: hidden;
}

/* ---- фоновые пятна ---- */
.blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  z-index: 0;
  animation: float 18s ease-in-out infinite;
}
.blob-1 { width: 460px; height: 460px; background: #5b6cff; top: -120px; left: -80px; }
.blob-2 { width: 420px; height: 420px; background: #c456ff; bottom: -140px; right: -60px; animation-delay: -6s; }
.blob-3 { width: 360px; height: 360px; background: #2ed6ff; top: 40%; left: 55%; animation-delay: -11s; opacity: 0.35; }
@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, -30px) scale(1.08); }
  66% { transform: translate(-30px, 25px) scale(0.95); }
}

/* ---- стекло ---- */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.wrap {
  position: relative;
  z-index: 1;
  max-width: 920px;
  margin: 0 auto;
  padding: 38px 20px 60px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card { border-radius: var(--radius); }

/* ---- topbar ---- */
.topbar {
  border-radius: var(--radius);
  padding: 20px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 16px; }
.logo {
  font-size: 38px; line-height: 1;
  background: linear-gradient(135deg, #74f7ff, #b28bff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px rgba(120, 150, 255, 0.5));
}
.brand h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; }
.sub { color: var(--txt-dim); font-size: 13px; }
.dom { color: #9fb4ff; }

.topbar-right { display: flex; align-items: center; gap: 22px; }
.dash-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 14px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 14px;
  text-decoration: none; color: #0b0b1a; white-space: nowrap;
  background: linear-gradient(135deg, #8ef4ff, #b79bff);
  box-shadow: 0 8px 26px rgba(140, 160, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dash-btn span { transition: transform 0.2s ease; }
.dash-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(140, 160, 255, 0.55); }
.dash-btn:hover span { transform: translateX(4px); }

.status { display: flex; align-items: center; gap: 12px; }
.status > div { display: flex; flex-direction: column; line-height: 1.3; }
.status-label { font-weight: 600; font-size: 13px; letter-spacing: 1px; color: #6effc0; }
.status-up { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--txt-dim); }
.dot {
  width: 11px; height: 11px; border-radius: 50%; background: #43f5a0;
  box-shadow: 0 0 0 0 rgba(67, 245, 160, 0.6); animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(67, 245, 160, 0.5); }
  70% { box-shadow: 0 0 0 12px rgba(67, 245, 160, 0); }
  100% { box-shadow: 0 0 0 0 rgba(67, 245, 160, 0); }
}

/* ---- гейджи ---- */
.gauges { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.gauge-card { padding: 28px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.gauge { position: relative; width: 200px; height: 200px; }
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.track { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 14; }
.fill {
  fill: none; stroke-width: 14; stroke-linecap: round;
  stroke-dasharray: 527.79; stroke-dashoffset: 527.79;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  filter: drop-shadow(0 0 8px rgba(140, 160, 255, 0.55));
}
.gauge-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
}
.gauge-val { font-size: 44px; font-weight: 700; letter-spacing: -1px; }
.gauge-val i { font-size: 20px; font-style: normal; color: var(--txt-dim); margin-left: 2px; }
.gauge-name { font-size: 13px; letter-spacing: 3px; color: var(--txt-dim); font-weight: 500; }
.card-meta {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--txt-dim);
  text-align: center; line-height: 1.4;
}

/* ---- статы ---- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.stat { padding: 20px 22px; display: flex; flex-direction: column; gap: 7px; }
.stat-label { font-size: 12px; color: var(--txt-dim); letter-spacing: 0.5px; }
.stat-val { font-size: 26px; font-weight: 600; font-family: 'JetBrains Mono', monospace; }
.stat-sub { font-size: 11px; color: var(--txt-dim); }
.bar { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.1); overflow: hidden; margin: 2px 0; }
.bar i { display: block; height: 100%; width: 0; border-radius: 6px;
  background: linear-gradient(90deg, #74f7ff, #b28bff); transition: width 0.8s ease; }

/* ---- график ---- */
.chart-card { padding: 22px 24px; }
.chart-head { display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--txt-dim); margin-bottom: 10px; letter-spacing: 0.5px; }
.chart-now { font-family: 'JetBrains Mono', monospace; color: #9fb4ff; font-size: 15px; }
#spark { width: 100%; height: 160px; display: block; }

/* ---- сервисы ---- */
.services h2 { font-size: 15px; color: var(--txt-dim); font-weight: 500;
  letter-spacing: 1px; margin: 6px 4px; text-transform: uppercase; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.tile {
  border-radius: 18px; padding: 20px; text-decoration: none; color: var(--txt);
  display: flex; flex-direction: column; gap: 6px; transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tile:hover { transform: translateY(-5px);
  box-shadow: 0 16px 50px rgba(90, 110, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.tile-ico { font-size: 26px; }
.tile-name { font-weight: 600; font-size: 16px; }
.tile-sub { font-size: 12px; color: var(--txt-dim); }

.foot { text-align: center; color: var(--txt-dim); font-size: 12px; margin-top: 14px; }

@media (max-width: 620px) {
  .gauges { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .topbar { flex-direction: column; gap: 16px; align-items: flex-start; }
}