.rpi {
  --rpi-bg: #fbfaf8;
  --rpi-panel: #fff;
  --rpi-panel-2: #f6f1ef;
  --rpi-ink: #22191b;
  --rpi-muted: #76676b;
  --rpi-line: #e3d8d5;
  --rpi-input: #fff;
  --rpi-red: #b9232f;
  --rpi-red-dark: #841721;
  --rpi-yellow: #b76a14;
  --rpi-green: #17764a;
  --rpi-amber-bg: #fff8e7;
  --rpi-amber-ink: #733b08;
  --rpi-shadow: rgba(77, 37, 42, 0.14);

  width: 100%;
  overflow: hidden;
  border: 1px solid var(--rpi-line);
  border-radius: 8px;
  background: var(--rpi-bg);
  color: var(--rpi-ink);
  box-shadow: 0 20px 50px var(--rpi-shadow);
}

.theme-dark .rpi {
  --rpi-bg: #100d10;
  --rpi-panel: #191317;
  --rpi-panel-2: #22171b;
  --rpi-ink: #fff7f7;
  --rpi-muted: #d0bcc0;
  --rpi-line: #3d2a30;
  --rpi-input: #0d090c;
  --rpi-red: #f05252;
  --rpi-red-dark: #9b1c1c;
  --rpi-yellow: #f59e0b;
  --rpi-green: #22c55e;
  --rpi-amber-bg: #241706;
  --rpi-amber-ink: #f8d67a;
  --rpi-shadow: rgba(0, 0, 0, 0.36);
}

.rpi__warning {
  display: grid;
  grid-template-columns: 1.8rem 1fr;
  gap: 0.85rem;
  padding: 1rem clamp(1rem, 3vw, 1.35rem);
  border-bottom: 1px solid color-mix(in srgb, var(--rpi-yellow) 54%, var(--rpi-line));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--rpi-yellow) 12%, transparent), transparent 54%),
    var(--rpi-amber-bg);
  color: var(--rpi-amber-ink);
}

.rpi__warning-icon {
  width: 1.8rem;
  height: 1.8rem;
  margin-top: 0.1rem;
}

.rpi__warning strong {
  display: block;
  margin-bottom: 0.28rem;
  font-size: 0.83rem;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.rpi__warning span {
  display: block;
  max-width: 92ch;
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.5;
}

.rpi__report {
  display: grid;
  background: var(--rpi-panel-2);
}

.rpi__inputs {
  display: grid;
  gap: 0.75rem;
  padding: clamp(0.85rem, 2.4vw, 1.15rem);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--rpi-red) 5%, transparent), transparent),
    var(--rpi-panel-2);
}

.rpi__field {
  display: grid;
  gap: 0.65rem;
  padding: 0.9rem;
  border: 1px solid var(--rpi-line);
  border-radius: 8px;
  background: var(--rpi-panel);
}

.rpi__field span {
  color: var(--rpi-muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.rpi__input {
  width: 100%;
  min-width: 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--rpi-line) 72%, var(--rpi-red));
  border-radius: 8px;
  background: var(--rpi-input);
  color: var(--rpi-ink);
  font: inherit;
  font-size: clamp(1.65rem, 5vw, 2.45rem);
  font-weight: 950;
  line-height: 1;
  outline: none;
}

.rpi__input::placeholder {
  color: color-mix(in srgb, var(--rpi-muted) 42%, transparent);
}

.rpi__input:focus {
  border-color: var(--rpi-red);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rpi-red) 16%, transparent);
}

.rpi__presets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
}

.rpi__preset {
  min-height: 2.15rem;
  border: 1px solid var(--rpi-line);
  border-radius: 6px;
  background: transparent;
  color: var(--rpi-muted);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 900;
  cursor: pointer;
}

.rpi__preset--active {
  border-color: var(--rpi-red);
  background: var(--rpi-red);
  color: #fff;
}

.rpi__result {
  display: grid;
  margin: 0 clamp(0.85rem, 2.4vw, 1.15rem) clamp(0.85rem, 2.4vw, 1.15rem);
  overflow: hidden;
  border: 1px solid var(--rpi-line);
  border-radius: 8px;
  background: var(--rpi-panel);
}

.rpi__sphere {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 18rem;
  padding: 1rem;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--rpi-red) 12%, transparent), transparent 42%),
    var(--rpi-panel);
}

.rpi__sphere svg {
  width: min(78%, 13.5rem);
  height: auto;
  opacity: 0.92;
  filter: drop-shadow(0 18px 24px rgba(83, 24, 31, 0.18));
}

.rpi__sphere-orbit {
  fill: none;
  stroke: color-mix(in srgb, var(--rpi-red) 28%, var(--rpi-line));
  stroke-width: 2;
  stroke-dasharray: 6 8;
}

.rpi__sphere-core {
  fill: color-mix(in srgb, var(--rpi-red) 12%, var(--rpi-panel));
  stroke: color-mix(in srgb, var(--rpi-red) 56%, var(--rpi-line));
  stroke-width: 4;
}

.theme-dark .rpi__sphere-core {
  fill: color-mix(in srgb, var(--rpi-red-dark) 56%, #130b0f);
}

.rpi__sphere-fill {
  fill: url("#rpiSphereGlow");
  opacity: 0.72;
  transition: d 180ms ease;
}

.rpi__sphere-shine {
  fill: rgba(255, 255, 255, 0.7);
}

.rpi__sphere-value {
  position: absolute;
  display: grid;
  gap: 0.2rem;
  place-items: center;
  min-width: 9rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--rpi-line) 64%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--rpi-panel) 82%, transparent);
  text-align: center;
  box-shadow: 0 12px 28px rgba(60, 25, 31, 0.12);
}

.theme-dark .rpi__sphere-value {
  background: rgba(12, 8, 11, 0.78);
}

.rpi__sphere-value span {
  color: var(--rpi-muted);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rpi__sphere-value strong {
  color: var(--rpi-ink);
  font-size: clamp(3.1rem, 12vw, 4.75rem);
  font-weight: 1000;
  line-height: 0.9;
}

.rpi__readout {
  display: grid;
  align-content: center;
  gap: 0.72rem;
  padding: clamp(1rem, 3vw, 1.35rem);
  border-top: 1px solid var(--rpi-line);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--rpi-red) 7%, transparent), transparent 58%),
    var(--rpi-panel);
}

.rpi__badge {
  width: fit-content;
  padding: 0.35rem 0.62rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--rpi-red) 14%, transparent);
  color: var(--rpi-red);
  font-size: 0.74rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rpi__readout strong {
  color: var(--rpi-red);
  font-size: clamp(1.6rem, 5vw, 2.45rem);
  line-height: 1;
}

.rpi__readout p {
  max-width: 62ch;
  margin: 0;
  color: var(--rpi-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.rpi__result[data-band="borderline"] .rpi__badge,
.rpi__result[data-band="borderline"] .rpi__readout strong {
  color: var(--rpi-yellow);
}

.rpi__result[data-band="adequate"] .rpi__badge,
.rpi__result[data-band="adequate"] .rpi__readout strong {
  color: var(--rpi-green);
}

.rpi__result[data-band="borderline"] .rpi__badge {
  background: color-mix(in srgb, var(--rpi-yellow) 15%, transparent);
}

.rpi__result[data-band="adequate"] .rpi__badge {
  background: color-mix(in srgb, var(--rpi-green) 15%, transparent);
}

.rpi__metrics {
  display: grid;
  gap: 0.75rem;
  padding: 0 clamp(0.85rem, 2.4vw, 1.15rem) clamp(0.85rem, 2.4vw, 1.15rem);
  background: var(--rpi-panel-2);
}

.rpi__metric {
  display: grid;
  gap: 0.35rem;
  padding: 0.9rem;
  border: 1px solid var(--rpi-line);
  border-radius: 8px;
  background: var(--rpi-panel);
}

.rpi__metric span {
  color: var(--rpi-muted);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rpi__metric strong {
  color: var(--rpi-ink);
  font-size: clamp(1.75rem, 6vw, 2.65rem);
  line-height: 1;
}

.rpi__formula {
  display: grid;
  gap: 0.75rem;
  padding: 0 clamp(0.85rem, 2.4vw, 1.15rem) clamp(0.85rem, 2.4vw, 1.15rem);
  background: var(--rpi-panel-2);
}

.rpi__formula-card,
.rpi__factor-card {
  display: grid;
  gap: 0.65rem;
  padding: 0.9rem;
  border: 1px solid var(--rpi-line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--rpi-red) 5%, transparent), transparent 62%),
    var(--rpi-panel);
}

.rpi__formula-card {
  grid-template-columns: 0.78rem 1fr;
  align-items: start;
}

.rpi__formula-mark {
  width: 0.78rem;
  min-height: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--rpi-red), color-mix(in srgb, var(--rpi-red) 18%, transparent));
}

.rpi__formula-copy {
  display: grid;
  gap: 0.42rem;
}

.rpi__formula-copy strong {
  color: var(--rpi-ink);
  font-size: 0.86rem;
}

.rpi__formula-copy span,
.rpi__factor-grid span {
  color: var(--rpi-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.rpi__factor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.rpi__factor-grid span {
  min-height: 2.35rem;
  padding: 0.48rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--rpi-line) 80%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--rpi-panel-2) 64%, transparent);
  font-weight: 750;
}

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

@media (min-width: 720px) {
  .rpi__inputs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .rpi__result {
    grid-template-columns: minmax(280px, 0.78fr) minmax(360px, 1.22fr);
  }

  .rpi__readout {
    border-top: 0;
    border-left: 1px solid var(--rpi-line);
  }

  .rpi__metrics {
    grid-template-columns: repeat(3, 1fr);
  }

  .rpi__formula {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(260px, 0.86fr);
  }
}