@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&display=swap");

/* ==== BASE ==== */

*,

*::before,

*::after {

  box-sizing: border-box;

}

html,

body {

  margin: 0;

  padding: 0;

}

.rpcm-body {

  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  background: radial-gradient(circle at 20% 0, #05231a 0, #020c09 40%, #020407 100%);

  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",

    "Roboto", sans-serif;

  color: #e2fff5;

}

/* ==== CARD ==== */

.rpcm-shell {

  padding: 10px;

  width: 100%;

  max-width: 520px;

}

.rpcm-card {

  position: relative;

  display: flex;

  align-items: stretch;

  justify-content: space-between;

  gap: 10px;

  padding: 10px 12px;

  border-radius: 18px;

  background:

    radial-gradient(circle at 0 0, rgba(0, 255, 195, 0.22), transparent 55%),

    radial-gradient(circle at 100% 100%, rgba(0, 163, 255, 0.18), transparent 55%),

    linear-gradient(145deg, #02070b 0%, #030f15 45%, #020309 100%);

  border: 1px solid rgba(0, 255, 195, 0.46);

  box-shadow:

    0 0 0 1px rgba(0, 255, 195, 0.15),

    0 14px 30px rgba(0, 0, 0, 0.9);

  overflow: hidden;

  backdrop-filter: blur(6px);

}

/* scanlines */

.rpcm-card::before {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background-image: linear-gradient(

    to bottom,

    rgba(226, 255, 245, 0.08) 1px,

    transparent 1px

  );

  background-size: 100% 2px;

  mix-blend-mode: soft-light;

  opacity: 0.25;

}

/* inner neon */

.rpcm-card::after {

  content: "";

  position: absolute;

  inset: 0;

  border-radius: 18px;

  border: 1px solid rgba(0, 255, 195, 0.4);

  box-shadow: 0 0 14px rgba(0, 255, 195, 0.35);

  pointer-events: none;

  opacity: 0.22;

}

/* ==== LAYOUT COLUMNS ==== */

.rpcm-col {

  position: relative;

  z-index: 1;

  display: flex;

  flex-direction: column;

  justify-content: center;

}

.rpcm-col-left {

  flex: 0 0 110px;

}

.rpcm-col-center {

  flex: 1 1 auto;

  min-width: 0;

}

.rpcm-col-right {

  flex: 0 0 140px;

  align-items: flex-end;

}

/* ==== TEXT ELEMENTS ==== */

.rpcm-label {

  font-size: 9px;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  color: rgba(160, 235, 210, 0.85);

}

.rpcm-label-right {

  margin-bottom: 2px;

}

.rpcm-row {

  display: flex;

  align-items: baseline;

  justify-content: space-between;

  gap: 6px;

}

.rpcm-row-sub {

  margin-top: 2px;

}

.rpcm-value {

  font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;

  font-size: 15px;

  color: #f6fff9;

}

.rpcm-subvalue {

  font-size: 11px;

  color: rgba(194, 241, 227, 0.9);

}

.rpcm-note {

  margin-top: 3px;

  font-size: 10px;

  color: rgba(170, 227, 210, 0.85);

}

/* ==== STATUS ==== */

.rpcm-status-row {

  display: flex;

  align-items: center;

  gap: 6px;

  margin-top: 2px;

}

.rpcm-status-dot {

  width: 9px;

  height: 9px;

  border-radius: 999px;

  box-shadow: 0 0 0 1px rgba(2, 10, 8, 0.9);

}

.rpcm-status-unknown {

  background: #7d8c95;

  box-shadow: 0 0 7px rgba(125, 140, 149, 0.6);

}

.rpcm-status-ok {

  background: #1fff9e;

  box-shadow: 0 0 9px rgba(0, 255, 195, 0.95);

}

.rpcm-status-warn {

  background: #ffcc33;

  box-shadow: 0 0 9px rgba(255, 204, 51, 0.95);

}

.rpcm-status-bad {

  background: #ff3366;

  box-shadow: 0 0 9px rgba(255, 51, 102, 0.95);

}

.rpcm-status-text {

  font-size: 12px;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color: #e5fff6;

}

/* ==== CENTER / ENDPOINT ==== */

.rpcm-endpoint {

  font-size: 10px;

  color: rgba(175, 232, 216, 0.85);

}

.rpcm-endpoint-text {

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

/* ==== RIGHT: LATENCY + INLINE BADGE ==== */

.rpcm-latency {

  font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;

  font-size: 16px;

  color: #f6fff9;

}

.rpcm-updated {

  margin-top: 1px;

  font-size: 10px;

  color: rgba(185, 236, 220, 0.85);

}

/* === INLINE BADGE (MINI VERSION) === */

.rpcm-powered-inline {

  display: inline-flex;

  align-items: center;

  gap: 5px;

  margin-top: 4px;

  padding: 4px 8px;

  border-radius: 10px;

  border: 1px solid rgba(86, 203, 255, 0.5);

  background: linear-gradient(

    135deg,

    rgba(5, 34, 41, 0.85),

    rgba(0, 0, 0, 0.95)

  );

  box-shadow: 0 0 8px rgba(0, 185, 255, 0.3);

}

.rpcm-powered-label-inline {

  font-size: 8px;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  color: rgba(177, 226, 245, 0.85);

  white-space: nowrap;

}

.rpcm-logo-inline {

  height: 16px;

  width: auto;

  opacity: 0.95;

  filter: drop-shadow(0 0 2px rgba(0, 255, 195, 0.25));

  transition: opacity 0.15s ease-out, transform 0.15s ease-out;

}

.rpcm-logo-inline:hover {

  opacity: 1;

  transform: scale(1.03);

}

/* ==== MOBILE ==== */

@media (max-width: 480px) {

  .rpcm-card {

    flex-direction: column;

    gap: 8px;

  }

  .rpcm-col-left,

  .rpcm-col-center,

  .rpcm-col-right {

    flex: 1 1 auto;

    align-items: flex-start;

  }

  .rpcm-col-right {

    align-items: flex-end;

  }

  .rpcm-shell {

    max-width: 100%;

  }

  .rpcm-logo-inline {

    height: 14px;

  }

}