/* ZKIM Node Status — aligned with frontend-rust theme (dark) */
/* Variables from frontend-rust/styles/theme.css */
:root {
  --zkim-bg-dark: #080808;
  --zkim-surface-on-dark: rgba(255, 255, 255, 0.08);
  --zkim-surface-on-dark-elevated: rgba(255, 255, 255, 0.14);
  --zkim-border-on-dark: rgba(255, 255, 255, 0.12);
  --zkim-text-on-dark: #fafafa;
  --zkim-muted-on-dark: #a1a1aa;
  --zkim-success: #4cd8a0;
  --zkim-success-rgb: 76, 216, 160;
  --zkim-error: #f27171;
  --zkim-warning: #e6b44e;
  --zkim-font:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --zkim-radius: 0.5rem;
  --zkim-radius-lg: 1rem;
  --zkim-space-2: 0.5rem;
  --zkim-space-3: 0.75rem;
  --zkim-space-4: 1rem;
  --zkim-space-6: 1.5rem;
  --zkim-space-8: 2rem;
  --zkim-text-sm: 0.875rem;
  --zkim-text-xs: 0.75rem;
  --zkim-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--zkim-bg-dark);
  color: var(--zkim-text-on-dark);
  font-family: var(--zkim-font);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--zkim-space-6);
}

.status-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 360px;
}

.status-logo {
  width: 120px;
  height: auto;
  margin-bottom: var(--zkim-space-4);
}

.status-title {
  margin: 0 0 var(--zkim-space-2);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--zkim-text-on-dark);
}

.status-pulse-wrap {
  margin: var(--zkim-space-4) 0 var(--zkim-space-8);
}

.status-pulse-outer {
  position: relative;
  display: inline-block;
  color: var(--zkim-success);
  width: 80px;
  height: 80px;
}

.status-pulse-outer::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0.45;
  transform: scale(1);
  animation: status-pulse-ring 3s cubic-bezier(0.33, 0, 0.2, 1) infinite;
  pointer-events: none;
  will-change: transform, opacity;
}

.status-pulse-outer.fail {
  color: var(--zkim-error);
}

.status-pulse-outer.degraded {
  color: var(--zkim-warning);
}

.status-pulse {
  display: block;
  width: 80px;
  height: 80px;
  color: var(--zkim-success);
  position: relative;
  z-index: 1;
}

.status-pulse-outer.fail .status-pulse {
  color: var(--zkim-error);
}

.status-pulse-outer.degraded .status-pulse {
  color: var(--zkim-warning);
}

@keyframes status-pulse-ring {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.45;
  }
  50% {
    transform: scale(1.35);
    opacity: 0;
  }
}

.status-components {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--zkim-space-6);
  width: 100%;
  margin-bottom: var(--zkim-space-4);
}

.status-component {
  display: flex;
  align-items: center;
  gap: var(--zkim-space-3);
  font-size: var(--zkim-text-sm);
}

.status-component .status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--zkim-muted-on-dark);
  transition: background var(--zkim-transition-base);
}

.status-component.ok .status-dot {
  background: var(--zkim-success);
  box-shadow: 0 0 8px rgba(var(--zkim-success-rgb), 0.5);
}

.status-component.fail .status-dot {
  background: var(--zkim-error);
}

.status-overall {
  margin-bottom: var(--zkim-space-4);
  font-size: var(--zkim-text-sm);
}

.status-badge {
  display: inline-block;
  padding: var(--zkim-space-2) var(--zkim-space-4);
  border-radius: 9999px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: var(--zkim-surface-on-dark);
  color: var(--zkim-muted-on-dark);
  border: 1px solid var(--zkim-border-on-dark);
}

.status-badge--operational {
  background: rgba(var(--zkim-success-rgb), 0.2);
  color: var(--zkim-success);
  border: 1px solid rgba(var(--zkim-success-rgb), 0.4);
}

.status-badge--degraded {
  background: rgba(234, 179, 8, 0.2);
  color: var(--zkim-warning);
  border: 1px solid rgba(234, 179, 8, 0.4);
}

.status-badge--outage {
  background: rgba(242, 113, 113, 0.2);
  color: var(--zkim-error);
  border: 1px solid rgba(242, 113, 113, 0.4);
}

.status-meta {
  margin-top: var(--zkim-space-6);
  padding-top: var(--zkim-space-4);
  border-top: 1px solid var(--zkim-border-on-dark);
  font-size: var(--zkim-text-sm);
  color: var(--zkim-muted-on-dark);
}