.jp-hud-map {
      --hud-cyan: #8ef2ff;
      --hud-blue: #4dc3ff;
      --hud-orange: #ff8f3f;
      --hud-ink: #07131f;
      position: relative;
      margin-top: 1rem;
      padding: 1rem;
      border-radius: 24px;
      overflow: hidden;
      border: 1px solid rgba(77, 195, 255, 0.28);
      background:
        radial-gradient(circle at 14% 18%, rgba(77, 195, 255, 0.22), transparent 28%),
        radial-gradient(circle at 82% 14%, rgba(255, 143, 63, 0.16), transparent 24%),
        linear-gradient(145deg, rgba(7, 19, 31, 0.96), rgba(10, 24, 39, 0.92));
      box-shadow:
        inset 0 0 0 1px rgba(142, 242, 255, 0.06),
        0 16px 42px rgba(3, 11, 22, 0.34);
      color: #e7fbff;
    }

.contact-note-warning {
  background: #fff6da;
  border: 1px solid #f0d891;
  padding: 10px 12px;
  border-radius: 8px;
  color: #674a00;
}

.contact-faq-link {
  margin-top: 0.8rem;
}

.contact-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.contact-form-grid.is-spaced {
  margin-top: 0.6rem;
}

.contact-form-label {
  display: block;
}

.contact-field-spaced {
  display: block;
  margin-top: 0.6rem;
}

.contact-userdiag-note {
  margin-top: 0.4rem;
  color: #7a3b00;
  background: #fff3cd;
  border: 1px solid #ffeeba;
  padding: 0.45rem;
  border-radius: 6px;
  display: none;
  font-size: 0.95rem;
}

.contact-form-actions {
  margin-top: 0.6rem;
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
}

.contact-why-section {
  padding-top: 0;
}

.contact-why-title {
  margin-bottom: 0.8rem;
}

    .jp-hud-map::before,
    .jp-hud-map::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    .jp-hud-map::before {
      background-image:
        linear-gradient(rgba(142, 242, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(142, 242, 255, 0.08) 1px, transparent 1px);
      background-size: 32px 32px;
      mask-image: radial-gradient(circle at center, black 42%, transparent 100%);
      opacity: 0.55;
    }

    .jp-hud-map::after {
      background: linear-gradient(180deg, transparent, rgba(142, 242, 255, 0.07), transparent);
      transform: translateY(-100%);
      animation: hudScanSweep 4.6s linear infinite;
      opacity: 0.65;
    }

    .jp-hud-header {
      position: relative;
      z-index: 2;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 1rem;
      margin-bottom: 0.9rem;
    }

    .jp-hud-title {
      margin: 0;
      font-size: 1.02rem;
      font-weight: 800;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--hud-cyan);
      text-shadow: 0 0 12px rgba(142, 242, 255, 0.45);
    }

    .jp-hud-subtitle,
    .jp-hud-coords,
    .jp-hud-status {
      margin: 0.2rem 0 0;
      font-size: 0.8rem;
      line-height: 1.5;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(231, 251, 255, 0.74);
    }

    .jp-hud-status {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      padding: 0.48rem 0.72rem;
      border: 1px solid rgba(255, 143, 63, 0.32);
      border-radius: 999px;
      background: rgba(255, 143, 63, 0.08);
      color: #ffd4b7;
      white-space: nowrap;
    }

    .jp-hud-status::before {
      content: "";
      width: 0.58rem;
      height: 0.58rem;
      border-radius: 50%;
      background: var(--hud-orange);
      box-shadow: 0 0 16px rgba(255, 143, 63, 0.86);
      animation: hudBeaconPulse 1.6s ease-in-out infinite;
    }

    .jp-hud-frame {
      position: relative;
      z-index: 1;
      height: 320px;
      overflow: hidden;
      border-radius: 18px;
      border: 1px solid rgba(77, 195, 255, 0.24);
      background: #020a11;
      box-shadow:
        inset 0 0 0 1px rgba(142, 242, 255, 0.08),
        0 18px 36px rgba(0, 0, 0, 0.34);
    }

    .jp-hud-frame iframe {
      width: 100%;
      height: 100%;
      border: 0;
      filter: saturate(0.78) contrast(1.08) brightness(0.74) hue-rotate(182deg);
    }

    .jp-hud-overlay,
    .jp-hud-corners,
    .jp-hud-target,
    .jp-hud-frame-label,
    .jp-hud-frame-stats {
      position: absolute;
      pointer-events: none;
      z-index: 2;
    }

    .jp-hud-overlay {
      inset: 0;
      background:
        radial-gradient(circle at center, transparent 0 18%, rgba(5, 14, 24, 0.1) 36%, rgba(2, 10, 17, 0.42) 100%),
        linear-gradient(180deg, rgba(142, 242, 255, 0.04), transparent 35%, transparent 65%, rgba(142, 242, 255, 0.04));
    }

    .jp-hud-corners {
      inset: 14px;
      border: 1px solid rgba(142, 242, 255, 0.12);
      clip-path: polygon(0 14px, 14px 14px, 14px 0, calc(100% - 14px) 0, calc(100% - 14px) 14px, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 14px calc(100% - 14px), 0 calc(100% - 14px));
      box-shadow: inset 0 0 32px rgba(77, 195, 255, 0.08);
    }

    .jp-hud-target {
      left: 50%;
      top: 50%;
      width: 118px;
      height: 118px;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      border: 1px solid rgba(142, 242, 255, 0.4);
      box-shadow: 0 0 30px rgba(77, 195, 255, 0.2);
    }

    .jp-hud-target::before,
    .jp-hud-target::after {
      content: "";
      position: absolute;
      inset: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
    }

    .jp-hud-target::before {
      width: 22px;
      height: 22px;
      border: 2px solid var(--hud-orange);
      box-shadow: 0 0 18px rgba(255, 143, 63, 0.6);
    }

    .jp-hud-target::after {
      width: 152px;
      height: 152px;
      border: 1px dashed rgba(142, 242, 255, 0.28);
      animation: hudRotateSlow 12s linear infinite;
    }

    .jp-hud-target-line-x,
    .jp-hud-target-line-y {
      position: absolute;
      background: linear-gradient(90deg, transparent, rgba(142, 242, 255, 0.42), transparent);
    }

    .jp-hud-target-line-x {
      left: 50%;
      top: 50%;
      width: 100%;
      height: 1px;
      transform: translate(-50%, -50%);
    }

    .jp-hud-target-line-y {
      left: 50%;
      top: 50%;
      width: 1px;
      height: 100%;
      transform: translate(-50%, -50%);
      background: linear-gradient(180deg, transparent, rgba(142, 242, 255, 0.42), transparent);
    }

    .jp-hud-frame-label {
      left: 18px;
      top: 18px;
      max-width: min(72%, 320px);
      padding: 0.7rem 0.8rem;
      border-radius: 14px;
      border: 1px solid rgba(142, 242, 255, 0.2);
      background: rgba(4, 13, 22, 0.68);
      backdrop-filter: blur(6px);
      color: #f4feff;
      box-shadow: 0 0 18px rgba(77, 195, 255, 0.1);
    }

    .jp-hud-frame-label strong,
    .jp-hud-frame-label span {
      display: block;
    }

    .jp-hud-frame-label strong {
      font-size: 0.8rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--hud-cyan);
      margin-bottom: 0.28rem;
    }

    .jp-hud-frame-label span {
      font-size: 0.92rem;
      color: rgba(231, 251, 255, 0.9);
      line-height: 1.45;
    }

    .jp-hud-frame-stats {
      right: 18px;
      bottom: 18px;
      display: grid;
      gap: 0.5rem;
      min-width: 172px;
    }

    .jp-hud-frame-stat {
      padding: 0.58rem 0.72rem;
      border-radius: 14px;
      border: 1px solid rgba(142, 242, 255, 0.16);
      background: rgba(4, 13, 22, 0.68);
      backdrop-filter: blur(6px);
      text-align: right;
      box-shadow: 0 0 18px rgba(77, 195, 255, 0.08);
    }

    .jp-hud-frame-stat b,
    .jp-hud-frame-stat span {
      display: block;
    }

    .jp-hud-frame-stat b {
      font-size: 0.72rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(142, 242, 255, 0.72);
      margin-bottom: 0.22rem;
    }

    .jp-hud-frame-stat span {
      font-size: 1rem;
      font-weight: 700;
      color: #f3fdff;
    }

    .jp-hud-footer {
      position: relative;
      z-index: 2;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      margin-top: 0.9rem;
      flex-wrap: wrap;
    }

    .jp-hud-readout {
      display: flex;
      flex-wrap: wrap;
      gap: 0.55rem;
    }

    .jp-hud-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.42rem;
      padding: 0.45rem 0.72rem;
      border-radius: 999px;
      border: 1px solid rgba(142, 242, 255, 0.18);
      background: rgba(255, 255, 255, 0.03);
      color: rgba(231, 251, 255, 0.82);
      font-size: 0.76rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .jp-hud-chip::before {
      content: "";
      width: 0.45rem;
      height: 0.45rem;
      border-radius: 50%;
      background: var(--hud-cyan);
      box-shadow: 0 0 10px rgba(142, 242, 255, 0.7);
    }

    .jp-hud-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.8rem 1.05rem;
      border-radius: 14px;
      border: 1px solid rgba(255, 143, 63, 0.28);
      background: linear-gradient(135deg, rgba(255, 143, 63, 0.18), rgba(255, 143, 63, 0.08));
      color: #fff6ef;
      font-weight: 700;
      text-decoration: none;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
      box-shadow: 0 0 22px rgba(255, 143, 63, 0.18);
    }

    .jp-hud-link:hover,
    .jp-hud-link:focus-visible {
      transform: translateY(-1px);
      border-color: rgba(255, 143, 63, 0.52);
      box-shadow: 0 0 26px rgba(255, 143, 63, 0.28);
    }

    .jp-hud-launch {
      position: absolute;
      inset: 0;
      z-index: 4;
      border: 0;
      background: transparent;
      cursor: pointer;
      color: transparent;
    }

    .jp-hud-launch:focus-visible {
      outline: 2px solid rgba(142, 242, 255, 0.9);
      outline-offset: -6px;
      border-radius: 18px;
    }

    .jp-hud-modal {
      position: fixed;
      inset: 0;
      z-index: 16000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: clamp(12px, 2vw, 28px);
      background:
        radial-gradient(circle at center, rgba(16, 36, 58, 0.26), rgba(2, 7, 14, 0.92)),
        linear-gradient(135deg, rgba(4, 12, 22, 0.9), rgba(2, 8, 14, 0.96));
      backdrop-filter: blur(14px);
    }

    .jp-hud-modal.is-open {
      display: flex;
    }

    .jp-hud-modal-backdrop {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at center, rgba(77, 195, 255, 0.08), transparent 42%),
        linear-gradient(rgba(142, 242, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(142, 242, 255, 0.04) 1px, transparent 1px);
      background-size: auto, 42px 42px, 42px 42px;
      opacity: 0.8;
      pointer-events: none;
    }

    .jp-hud-modal-shell {
      position: relative;
      z-index: 1;
      width: min(96vw, 1480px);
      height: min(90vh, 980px);
      padding: clamp(14px, 2vw, 28px);
      border-radius: 30px;
      overflow: hidden;
      border: 1px solid rgba(77, 195, 255, 0.24);
      background:
        radial-gradient(circle at 16% 16%, rgba(77, 195, 255, 0.16), transparent 24%),
        radial-gradient(circle at 84% 14%, rgba(255, 143, 63, 0.12), transparent 20%),
        linear-gradient(160deg, rgba(4, 13, 22, 0.96), rgba(6, 19, 31, 0.96));
      box-shadow:
        inset 0 0 0 1px rgba(142, 242, 255, 0.06),
        0 22px 84px rgba(0, 0, 0, 0.55);
    }

    .jp-hud-modal-shell::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(142, 242, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(142, 242, 255, 0.04) 1px, transparent 1px);
      background-size: 38px 38px;
      mask-image: radial-gradient(circle at center, black 54%, transparent 100%);
    }

    .jp-hud-modal-topbar {
      position: relative;
      z-index: 3;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 1rem;
      margin-bottom: 1rem;
    }

    .jp-hud-modal-title {
      margin: 0;
      font-size: clamp(1rem, 1.2vw, 1.22rem);
      font-weight: 800;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--hud-cyan);
      text-shadow: 0 0 20px rgba(142, 242, 255, 0.3);
    }

    .jp-hud-modal-copy {
      margin: 0.35rem 0 0;
      max-width: 640px;
      color: rgba(231, 251, 255, 0.74);
      font-size: 0.9rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      line-height: 1.5;
    }

    .jp-hud-modal-status {
      margin-top: 0.6rem;
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      padding: 0.5rem 0.76rem;
      border-radius: 999px;
      border: 1px solid rgba(142, 242, 255, 0.2);
      background: rgba(255, 255, 255, 0.04);
      color: rgba(231, 251, 255, 0.86);
      font-size: 0.74rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .jp-hud-modal-status::before {
      content: "";
      width: 0.48rem;
      height: 0.48rem;
      border-radius: 50%;
      background: var(--hud-cyan);
      box-shadow: 0 0 12px rgba(142, 242, 255, 0.72);
    }

    .jp-hud-modal-close {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 46px;
      height: 46px;
      padding: 0 0.9rem;
      border-radius: 14px;
      border: 1px solid rgba(255, 143, 63, 0.28);
      background: rgba(255, 143, 63, 0.1);
      color: #fff3e9;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      cursor: pointer;
      transition: transform 0.22s ease, box-shadow 0.22s ease;
    }

    .jp-hud-modal-close:hover,
    .jp-hud-modal-close:focus-visible {
      transform: translateY(-1px);
      box-shadow: 0 0 24px rgba(255, 143, 63, 0.18);
    }

    .jp-hud-modal-grid {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 300px;
      gap: 1rem;
      height: calc(100% - 78px);
      min-height: 0;
    }

    .jp-hud-stage-wrap {
      position: relative;
      min-height: 0;
      perspective: 1900px;
      perspective-origin: 50% 46%;
      border-radius: 26px;
      border: 1px solid rgba(77, 195, 255, 0.16);
      background:
        radial-gradient(circle at center, rgba(77, 195, 255, 0.1), transparent 44%),
        linear-gradient(180deg, rgba(3, 10, 18, 0.94), rgba(2, 8, 14, 0.98));
      overflow: hidden;
    }

    .jp-hud-stage-wrap::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(rgba(142, 242, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(142, 242, 255, 0.05) 1px, transparent 1px);
      background-size: 44px 44px;
      opacity: 0.48;
    }

    .jp-hud-stage {
      position: absolute;
      left: 50%;
      top: 50%;
      width: min(82vw, 980px);
      aspect-ratio: 1.45 / 1;
      transform-style: preserve-3d;
      transform: translate3d(-50%, -50%, 0) rotateX(58deg) rotateZ(-18deg) scale(1);
      transition: transform 160ms ease-out, box-shadow 160ms ease-out;
      cursor: grab;
      will-change: transform;
    }

    .jp-hud-stage.is-dragging {
      cursor: grabbing;
      transition: none;
    }

    .jp-hud-stage.is-live {
      transition: none;
    }

    .jp-hud-stage-shadow {
      position: absolute;
      inset: 12% 11% 2%;
      transform: translateZ(-80px);
      border-radius: 28px;
      background: radial-gradient(circle at center, rgba(0, 0, 0, 0.54), transparent 70%);
      filter: blur(30px);
      pointer-events: none;
    }

    .jp-hud-stage-base,
    .jp-hud-stage-panel,
    .jp-hud-stage-glass,
    .jp-hud-stage-scan,
    .jp-hud-stage-rings,
    .jp-hud-stage-label,
    .jp-hud-stage-meter,
    .jp-hud-stage-float,
    .jp-hud-orbit-panel {
      position: absolute;
      inset: 0;
      border-radius: 26px;
    }

    .jp-hud-stage-base {
      inset: 5%;
      transform: translateZ(-18px);
      border-radius: 34px;
      background: linear-gradient(160deg, rgba(6, 24, 39, 0.98), rgba(7, 19, 31, 0.98));
      border: 1px solid rgba(77, 195, 255, 0.16);
      box-shadow: inset 0 0 0 1px rgba(142, 242, 255, 0.05);
    }

    .jp-hud-stage-panel {
      inset: 8%;
      overflow: hidden;
      background: #071018;
      border: 1px solid rgba(77, 195, 255, 0.2);
      box-shadow:
        inset 0 0 0 1px rgba(142, 242, 255, 0.06),
        0 22px 58px rgba(0, 0, 0, 0.32);
    }

    .jp-hud-stage-panel iframe {
      width: 100%;
      height: 100%;
      border: 0;
      transform: scale(1.08);
      filter: saturate(0.82) contrast(1.06) brightness(0.78) hue-rotate(180deg);
    }

    .jp-hud-stage-glass {
      inset: 8%;
      background:
        linear-gradient(135deg, rgba(142, 242, 255, 0.08), transparent 38%),
        radial-gradient(circle at 50% 42%, transparent 0 20%, rgba(5, 14, 24, 0.12) 46%, rgba(2, 10, 17, 0.28) 100%);
      pointer-events: none;
      box-shadow: inset 0 0 0 1px rgba(142, 242, 255, 0.08);
    }

    .jp-hud-stage-scan {
      inset: 8%;
      pointer-events: none;
      background: linear-gradient(180deg, transparent, rgba(142, 242, 255, 0.12), transparent);
      transform: translateY(-120%);
      animation: hudScanSweep 4s linear infinite;
      opacity: 0.9;
    }

    .jp-hud-target-layer {
      position: absolute;
      inset: 8%;
      pointer-events: none;
      z-index: 3;
    }

    .jp-hud-client-point {
      position: absolute;
      transform: translate(-50%, -50%);
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: radial-gradient(circle at 50% 50%, #ffd3c3 0 20%, #ff5b45 24% 52%, #a80d0d 72% 100%);
      box-shadow: 0 0 16px rgba(255, 72, 54, 0.72), 0 0 28px rgba(255, 72, 54, 0.3);
      animation: hudEnemyPing 1.8s ease-in-out infinite;
      pointer-events: auto;
      cursor: pointer;
    }

    .jp-hud-client-point::before,
    .jp-hud-client-point::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      border-radius: 50%;
      transform: translate(-50%, -50%);
    }

    .jp-hud-client-point::before {
      width: 26px;
      height: 26px;
      border: 1px solid rgba(255, 88, 64, 0.44);
      animation: hudEnemyRing 2.2s ease-out infinite;
    }

    .jp-hud-client-point::after {
      width: 42px;
      height: 42px;
      border: 1px dashed rgba(255, 132, 99, 0.22);
      animation: hudEnemyRing 2.8s ease-out infinite;
    }

    .jp-hud-client-point.is-locked {
      width: 18px;
      height: 18px;
      box-shadow: 0 0 18px rgba(255, 179, 96, 0.9), 0 0 36px rgba(255, 98, 69, 0.45);
      background: radial-gradient(circle at 50% 50%, #fff0d8 0 24%, #ff9d4d 28% 56%, #c32713 74% 100%);
    }

    .jp-hud-client-point.is-selected:not(.is-locked) {
      box-shadow: 0 0 18px rgba(255, 108, 92, 0.88), 0 0 32px rgba(255, 72, 54, 0.34);
    }

    .jp-hud-client-point-trail {
      position: absolute;
      top: 50%;
      left: calc(100% + 4px);
      width: 28px;
      height: 1px;
      transform: translateY(-50%);
      background: linear-gradient(90deg, rgba(255, 97, 82, 0.68), rgba(255, 97, 82, 0));
      box-shadow: 0 0 10px rgba(255, 97, 82, 0.36);
      pointer-events: none;
    }

    .jp-hud-client-point.is-left .jp-hud-client-point-trail {
      left: auto;
      right: calc(100% + 4px);
      background: linear-gradient(90deg, rgba(255, 97, 82, 0), rgba(255, 97, 82, 0.68));
    }

    .jp-hud-client-point-label {
      position: absolute;
      top: 50%;
      left: calc(100% + 34px);
      transform: translateY(-50%);
      padding: 0.28rem 0.48rem;
      border-radius: 999px;
      border: 1px solid rgba(255, 88, 64, 0.24);
      background: rgba(14, 6, 6, 0.66);
      color: #ffd8c8;
      font-size: 0.62rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      white-space: nowrap;
      box-shadow: 0 0 12px rgba(255, 88, 64, 0.12);
      pointer-events: none;
    }

    .jp-hud-client-point.is-left .jp-hud-client-point-label {
      left: auto;
      right: calc(100% + 34px);
    }

    .jp-hud-client-point.is-selected .jp-hud-client-point-label {
      border-color: rgba(255, 117, 99, 0.42);
      box-shadow: 0 0 16px rgba(255, 88, 64, 0.2);
    }

    .jp-hud-client-point.is-locked .jp-hud-client-point-trail {
      width: 40px;
      background: linear-gradient(90deg, rgba(255, 187, 117, 0.88), rgba(255, 109, 88, 0));
      box-shadow: 0 0 14px rgba(255, 170, 87, 0.52);
    }

    .jp-hud-client-point.is-left.is-locked .jp-hud-client-point-trail {
      background: linear-gradient(90deg, rgba(255, 109, 88, 0), rgba(255, 187, 117, 0.88));
    }

    .jp-hud-client-point.is-locked .jp-hud-client-point-label {
      border-color: rgba(255, 196, 132, 0.66);
      color: #fff0cf;
      box-shadow: 0 0 18px rgba(255, 152, 70, 0.26);
    }

    .jp-hud-stage-rings {
      inset: 8%;
      pointer-events: none;
      background:
        radial-gradient(circle at center, transparent 0 7%, rgba(255, 143, 63, 0.6) 7.2% 7.6%, transparent 7.8% 14%, rgba(142, 242, 255, 0.3) 14.2% 14.5%, transparent 14.7% 23%, rgba(142, 242, 255, 0.22) 23.2% 23.45%, transparent 23.7% 34%, rgba(142, 242, 255, 0.18) 34.2% 34.35%, transparent 34.6% 100%);
      mix-blend-mode: screen;
    }

    .jp-hud-stage-rings::before,
    .jp-hud-stage-rings::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    .jp-hud-stage-rings::before {
      width: 88%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(142, 242, 255, 0.45), transparent);
    }

    .jp-hud-stage-rings::after {
      width: 1px;
      height: 88%;
      background: linear-gradient(180deg, transparent, rgba(142, 242, 255, 0.45), transparent);
    }

    .jp-hud-stage.is-target-locked .jp-hud-stage-rings {
      background:
        radial-gradient(circle at center, transparent 0 6.5%, rgba(255, 143, 63, 0.82) 6.7% 7.3%, transparent 7.6% 12.5%, rgba(142, 242, 255, 0.54) 12.8% 13.2%, transparent 13.5% 22%, rgba(142, 242, 255, 0.34) 22.3% 22.6%, transparent 22.9% 33%, rgba(255, 143, 63, 0.28) 33.2% 33.5%, transparent 33.8% 100%);
      animation: hudLockPulse 1.3s ease-in-out infinite;
    }

    .jp-hud-stage-label {
      inset: auto auto 14% 12%;
      width: 290px;
      padding: 0.85rem 0.95rem;
      border: 1px solid rgba(142, 242, 255, 0.18);
      background: rgba(4, 13, 22, 0.72);
      backdrop-filter: blur(8px);
      color: #f4feff;
      pointer-events: none;
      transform: translateZ(48px);
      box-shadow: 0 0 22px rgba(77, 195, 255, 0.12);
    }

    .jp-hud-stage-label b,
    .jp-hud-stage-label span {
      display: block;
    }

    .jp-hud-stage-label b {
      margin-bottom: 0.25rem;
      font-size: 0.76rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--hud-cyan);
    }

    .jp-hud-stage-label span {
      font-size: 0.92rem;
      line-height: 1.45;
      color: rgba(231, 251, 255, 0.92);
    }

    .jp-hud-stage-meter {
      inset: 12% 10% auto auto;
      width: 184px;
      padding: 0.75rem 0.8rem;
      border: 1px solid rgba(255, 143, 63, 0.18);
      background: rgba(6, 18, 30, 0.74);
      backdrop-filter: blur(8px);
      color: #fff7ef;
      pointer-events: none;
      transform: translateZ(52px);
    }

    .jp-hud-stage-meter b,
    .jp-hud-stage-meter span {
      display: block;
    }

    .jp-hud-stage-meter b {
      margin-bottom: 0.22rem;
      font-size: 0.72rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #ffd0b1;
    }

    .jp-hud-stage-meter span {
      font-size: 0.98rem;
      font-weight: 700;
      line-height: 1.4;
    }

    .jp-hud-stage-target-card {
      position: absolute;
      right: 9%;
      bottom: 13%;
      width: 236px;
      padding: 0.8rem 0.88rem;
      border-radius: 18px;
      border: 1px solid rgba(255, 104, 83, 0.24);
      background: linear-gradient(145deg, rgba(25, 9, 9, 0.84), rgba(11, 11, 20, 0.7));
      box-shadow: 0 0 24px rgba(255, 96, 72, 0.14);
      backdrop-filter: blur(10px);
      color: #fff1e6;
      pointer-events: none;
      transform: translateZ(82px);
      overflow: hidden;
    }

    .jp-hud-stage-target-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, rgba(255, 173, 94, 0.08), transparent 45%, rgba(255, 90, 65, 0.08));
      pointer-events: none;
    }

    .jp-hud-stage-target-card::after {
      content: "";
      position: absolute;
      left: -20%;
      top: 0;
      width: 60%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 188, 130, 0.16), transparent);
      transform: skewX(-24deg);
      animation: hudTargetSweep 4.4s linear infinite;
      pointer-events: none;
    }

    .jp-hud-stage-target-card.is-alert {
      border-color: rgba(255, 186, 121, 0.52);
      box-shadow: 0 0 28px rgba(255, 140, 76, 0.22);
      animation: hudTargetAlert 1.1s ease-in-out infinite;
    }

    .jp-hud-stage-target-card b,
    .jp-hud-stage-target-card strong,
    .jp-hud-stage-target-card span,
    .jp-hud-stage-target-card small {
      display: block;
      position: relative;
      z-index: 1;
    }

    .jp-hud-stage-target-card b {
      margin-bottom: 0.26rem;
      font-size: 0.64rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: #ffbd95;
    }

    .jp-hud-stage-target-card strong {
      margin-bottom: 0.16rem;
      font-size: 1rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #fff6ef;
    }

    .jp-hud-stage-target-card span {
      font-size: 0.82rem;
      line-height: 1.42;
      color: rgba(255, 235, 223, 0.88);
    }

    .jp-hud-stage-target-card small {
      margin-top: 0.55rem;
      font-size: 0.68rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #ffd7be;
    }

    .jp-hud-stage-target-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.45rem;
      margin-top: 0.7rem;
    }

    .jp-hud-stage-target-cell {
      padding: 0.42rem 0.48rem;
      border-radius: 12px;
      border: 1px solid rgba(255, 150, 106, 0.14);
      background: rgba(255, 255, 255, 0.03);
    }

    .jp-hud-stage-target-cell em,
    .jp-hud-stage-target-cell strong {
      display: block;
      font-style: normal;
    }

    .jp-hud-stage-target-cell em {
      margin-bottom: 0.14rem;
      font-size: 0.58rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(255, 196, 166, 0.72);
    }

    .jp-hud-stage-target-cell strong {
      font-size: 0.8rem;
      color: #fff6ef;
    }

    .jp-hud-stage-float {
      inset: auto;
      padding: 0.7rem 0.82rem;
      border: 1px solid rgba(142, 242, 255, 0.16);
      background: rgba(4, 13, 22, 0.58);
      backdrop-filter: blur(8px);
      color: #f4feff;
      pointer-events: none;
      box-shadow: 0 0 18px rgba(77, 195, 255, 0.1);
      transform-style: preserve-3d;
    }

    .jp-hud-stage-float b,
    .jp-hud-stage-float span {
      display: block;
    }

    .jp-hud-stage-float b {
      margin-bottom: 0.18rem;
      font-size: 0.68rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--hud-cyan);
    }

    .jp-hud-stage-float span {
      font-size: 0.84rem;
      line-height: 1.45;
      color: rgba(231, 251, 255, 0.84);
    }

    .jp-hud-stage-float-left {
      left: 10%;
      top: 16%;
      width: 210px;
      transform: translateZ(64px);
      animation: hudFloatOne 7.4s ease-in-out infinite;
    }

    .jp-hud-stage-float-right {
      right: 12%;
      bottom: 18%;
      width: 180px;
      transform: translateZ(70px);
      animation: hudFloatTwo 8.6s ease-in-out infinite;
    }

    .jp-hud-orbit-layer {
      position: absolute;
      inset: 8%;
      pointer-events: none;
      transform-style: preserve-3d;
    }

    .jp-hud-orbit-panel {
      inset: auto;
      width: 168px;
      padding: 0.72rem 0.8rem;
      border: 1px solid rgba(142, 242, 255, 0.18);
      background: rgba(4, 13, 22, 0.52);
      backdrop-filter: blur(8px);
      color: #f4feff;
      box-shadow: 0 0 18px rgba(77, 195, 255, 0.08);
      transform-style: preserve-3d;
      opacity: 0.9;
    }

    .jp-hud-orbit-panel b,
    .jp-hud-orbit-panel span {
      display: block;
    }

    .jp-hud-orbit-panel b {
      margin-bottom: 0.18rem;
      font-size: 0.66rem;
      letter-spacing: 0.17em;
      text-transform: uppercase;
      color: var(--hud-cyan);
    }

    .jp-hud-orbit-panel span {
      font-size: 0.8rem;
      line-height: 1.42;
      color: rgba(231, 251, 255, 0.82);
    }

    .jp-hud-orbit-panel-a {
      left: 8%;
      top: 12%;
      transform: translateZ(84px);
      animation: hudOrbitPanelA 13s ease-in-out infinite;
    }

    .jp-hud-orbit-panel-b {
      right: 10%;
      top: 18%;
      transform: translateZ(94px);
      animation: hudOrbitPanelB 15s ease-in-out infinite;
    }

    .jp-hud-orbit-panel-c {
      left: 18%;
      bottom: 10%;
      transform: translateZ(76px);
      animation: hudOrbitPanelC 12s ease-in-out infinite;
    }

    .jp-hud-sidepanel {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      gap: 0.9rem;
      min-height: 0;
    }

    .jp-hud-sidepanel-card {
      padding: 1rem;
      border-radius: 20px;
      border: 1px solid rgba(77, 195, 255, 0.18);
      background: rgba(4, 13, 22, 0.74);
      box-shadow: inset 0 0 0 1px rgba(142, 242, 255, 0.05);
    }

    .jp-hud-sidepanel-card h4 {
      margin: 0 0 0.55rem;
      color: var(--hud-cyan);
      font-size: 0.82rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .jp-hud-sidepanel-card p,
    .jp-hud-sidepanel-card li {
      margin: 0;
      color: rgba(231, 251, 255, 0.82);
      line-height: 1.55;
      font-size: 0.95rem;
    }

    .jp-hud-sidepanel-card ul {
      margin: 0;
      padding-left: 1rem;
    }

    .jp-hud-detection-list {
      display: grid;
      gap: 0.55rem;
    }

    .jp-hud-detection-item {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 0.7rem;
      width: 100%;
      padding: 0.62rem 0.7rem;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(142, 242, 255, 0.12);
      text-align: left;
      cursor: pointer;
      transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
    }

    .jp-hud-detection-item:hover {
      transform: translateY(-1px);
      border-color: rgba(142, 242, 255, 0.28);
      background: rgba(255, 255, 255, 0.05);
    }

    .jp-hud-detection-item.is-selected {
      border-color: rgba(255, 108, 92, 0.32);
      background: linear-gradient(135deg, rgba(255, 94, 82, 0.08), rgba(255, 255, 255, 0.03));
      box-shadow: inset 0 0 0 1px rgba(255, 119, 100, 0.12);
    }

    .jp-hud-detection-item.is-locked {
      border-color: rgba(255, 182, 117, 0.44);
      background: linear-gradient(135deg, rgba(255, 162, 78, 0.12), rgba(255, 94, 82, 0.06));
      box-shadow: inset 0 0 0 1px rgba(255, 196, 132, 0.18), 0 0 18px rgba(255, 118, 74, 0.12);
    }

    .jp-hud-detection-dot {
      width: 0.58rem;
      height: 0.58rem;
      border-radius: 50%;
      background: var(--hud-cyan);
      box-shadow: 0 0 12px rgba(142, 242, 255, 0.72);
      animation: hudBeaconPulse 1.8s ease-in-out infinite;
    }

    .jp-hud-detection-item.is-selected .jp-hud-detection-dot {
      background: #ff6d58;
      box-shadow: 0 0 12px rgba(255, 109, 88, 0.72);
    }

    .jp-hud-detection-item.is-locked .jp-hud-detection-dot {
      background: #ffbd78;
      box-shadow: 0 0 14px rgba(255, 189, 120, 0.8);
    }

    .jp-hud-detection-item strong,
    .jp-hud-detection-item span,
    .jp-hud-detection-item b {
      display: block;
    }

    .jp-hud-detection-item strong {
      font-size: 0.76rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--hud-cyan);
      margin-bottom: 0.18rem;
    }

    .jp-hud-detection-item span {
      font-size: 0.82rem;
      color: rgba(231, 251, 255, 0.82);
      line-height: 1.35;
    }

    .jp-hud-detection-item b {
      font-size: 0.72rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #ffd0b1;
      text-align: right;
    }

    .jp-hud-mini-board {
      display: grid;
      gap: 0.55rem;
    }

    .jp-hud-mini-board-row {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      padding: 0.65rem 0.72rem;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(142, 242, 255, 0.12);
    }

    .jp-hud-mini-board-row span,
    .jp-hud-mini-board-row strong {
      display: block;
    }

    .jp-hud-mini-board-row span {
      font-size: 0.74rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(231, 251, 255, 0.76);
    }

    .jp-hud-mini-board-row strong {
      font-size: 0.94rem;
      color: #f4feff;
      text-align: right;
    }

    .jp-hud-controls {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.65rem;
    }

    .jp-hud-control,
    .jp-hud-control-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 0.72rem 0.8rem;
      border-radius: 14px;
      border: 1px solid rgba(142, 242, 255, 0.18);
      background: rgba(255, 255, 255, 0.03);
      color: #effdff;
      text-decoration: none;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      cursor: pointer;
      transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    }

    .jp-hud-control:hover,
    .jp-hud-control:focus-visible,
    .jp-hud-control-link:hover,
    .jp-hud-control-link:focus-visible {
      transform: translateY(-1px);
      border-color: rgba(142, 242, 255, 0.36);
      box-shadow: 0 0 20px rgba(77, 195, 255, 0.12);
    }

    .jp-hud-control-link.jp-hud-control-primary {
      grid-column: 1 / -1;
      border-color: rgba(255, 143, 63, 0.28);
      background: linear-gradient(135deg, rgba(255, 143, 63, 0.18), rgba(255, 143, 63, 0.08));
      color: #fff5ed;
    }

    .jp-hud-control.is-active {
      border-color: rgba(255, 143, 63, 0.45);
      background: linear-gradient(135deg, rgba(255, 143, 63, 0.18), rgba(255, 143, 63, 0.08));
      color: #fff5ed;
      box-shadow: 0 0 20px rgba(255, 143, 63, 0.18);
    }

    .jp-hud-telemetry {
      display: grid;
      gap: 0.5rem;
    }

    .jp-hud-telemetry-row {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      padding: 0.55rem 0.65rem;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.03);
      color: rgba(231, 251, 255, 0.84);
      font-size: 0.84rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    body.jp-hud-open {
      overflow: hidden;
    }

    @keyframes hudScanSweep {
      from { transform: translateY(-100%); }
      to { transform: translateY(100%); }
    }

    @keyframes hudRotateSlow {
      from { transform: translate(-50%, -50%) rotate(0deg); }
      to { transform: translate(-50%, -50%) rotate(360deg); }
    }

    @keyframes hudBeaconPulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.18); opacity: 0.72; }
    }

    @keyframes hudLockPulse {
      0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 143, 63, 0)); }
      50% { filter: drop-shadow(0 0 16px rgba(255, 143, 63, 0.5)); }
    }

    @keyframes hudEnemyPing {
      0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
      50% { transform: translate(-50%, -50%) scale(1.18); opacity: 0.82; }
    }

    @keyframes hudEnemyRing {
      0% { transform: translate(-50%, -50%) scale(0.68); opacity: 0.75; }
      100% { transform: translate(-50%, -50%) scale(1.22); opacity: 0; }
    }

    @keyframes hudFloatOne {
      0%, 100% { transform: translate3d(0, 0, 64px); }
      50% { transform: translate3d(8px, -10px, 80px); }
    }

    @keyframes hudFloatTwo {
      0%, 100% { transform: translate3d(0, 0, 70px); }
      50% { transform: translate3d(-10px, 8px, 88px); }
    }

    @keyframes hudOrbitPanelA {
      0%, 100% { transform: translate3d(0, 0, 84px) rotate(-4deg); }
      50% { transform: translate3d(14px, -8px, 106px) rotate(3deg); }
    }

    @keyframes hudOrbitPanelB {
      0%, 100% { transform: translate3d(0, 0, 94px) rotate(3deg); }
      50% { transform: translate3d(-16px, 10px, 118px) rotate(-5deg); }
    }

    @keyframes hudOrbitPanelC {
      0%, 100% { transform: translate3d(0, 0, 76px) rotate(2deg); }
      50% { transform: translate3d(12px, -14px, 96px) rotate(-3deg); }
    }

    @keyframes hudTargetSweep {
      0% { transform: translateX(-140%) skewX(-24deg); }
      100% { transform: translateX(320%) skewX(-24deg); }
    }

    @keyframes hudTargetAlert {
      0%, 100% { transform: translateZ(82px) scale(1); }
      50% { transform: translateZ(82px) scale(1.02); }
    }

    .jp-hud-modal.mode-combat {
      --hud-cyan: #ffb06b;
      --hud-blue: #ff7b47;
      --hud-orange: #ff5533;
    }

    .jp-hud-modal.mode-combat .jp-hud-modal-backdrop {
      background:
        radial-gradient(circle at center, rgba(255, 98, 61, 0.11), transparent 42%),
        linear-gradient(rgba(255, 123, 71, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 123, 71, 0.05) 1px, transparent 1px);
      background-size: auto, 42px 42px, 42px 42px;
    }

    .jp-hud-modal.mode-combat .jp-hud-stage-glass {
      background:
        linear-gradient(135deg, rgba(255, 176, 107, 0.1), transparent 38%),
        radial-gradient(circle at 50% 42%, transparent 0 20%, rgba(44, 12, 8, 0.12) 46%, rgba(24, 4, 2, 0.34) 100%);
    }

    .jp-hud-modal.mode-combat .jp-hud-stage-scan {
      background: linear-gradient(180deg, transparent, rgba(255, 123, 71, 0.16), transparent);
    }

    .jp-hud-modal.mode-combat .jp-hud-modal-status,
    .jp-hud-modal.mode-combat .jp-hud-control.is-active {
      border-color: rgba(255, 123, 71, 0.38);
      background: rgba(255, 123, 71, 0.12);
      color: #fff1e8;
    }

    .jp-hud-modal.mode-combat .jp-hud-modal-status::before {
      background: #ff5533;
      box-shadow: 0 0 12px rgba(255, 85, 51, 0.74);
    }

    @media (max-width: 720px) {
      .jp-hud-header,
      .jp-hud-footer {
        flex-direction: column;
        align-items: stretch;
      }

      .jp-hud-status {
        width: fit-content;
      }

      .jp-hud-frame {
        height: 280px;
      }

      .jp-hud-frame-label,
      .jp-hud-frame-stats {
        position: absolute;
      }

      .jp-hud-frame-label {
        max-width: calc(100% - 36px);
      }

      .jp-hud-frame-stats {
        right: 12px;
        bottom: 12px;
        min-width: 144px;
      }

      .jp-hud-frame-stat {
        padding: 0.48rem 0.62rem;
      }

      .jp-hud-target {
        width: 96px;
        height: 96px;
      }

      .jp-hud-target::after {
        width: 128px;
        height: 128px;
      }
    }

    @media (max-width: 520px) {
      .jp-hud-map {
        padding: 0.85rem;
      }

      .jp-hud-title {
        font-size: 0.92rem;
      }

      .jp-hud-subtitle,
      .jp-hud-coords,
      .jp-hud-status,
      .jp-hud-chip,
      .jp-hud-frame-stat b,
      .jp-hud-frame-label strong {
        letter-spacing: 0.08em;
      }

      .jp-hud-frame {
        height: 250px;
      }

      .jp-hud-frame-label,
      .jp-hud-frame-stats {
        position: static;
        max-width: none;
        min-width: 0;
        margin: 0.75rem 0 0;
      }

      .jp-hud-overlay,
      .jp-hud-corners,
      .jp-hud-target,
      .jp-hud-target-line-x,
      .jp-hud-target-line-y {
        opacity: 0.88;
      }
    }

    @media (max-width: 1120px) {
      .jp-hud-modal-grid {
        grid-template-columns: 1fr;
      }

      .jp-hud-sidepanel {
        overflow: auto;
      }

      .jp-hud-stage-wrap {
        min-height: 420px;
      }
    }

    @media (max-width: 780px) {
      .jp-hud-modal-shell {
        height: min(94vh, 980px);
      }

      .jp-hud-modal-topbar {
        flex-direction: column;
        align-items: stretch;
      }

      .jp-hud-stage {
        width: min(110vw, 880px);
      }

      .jp-hud-stage-label,
      .jp-hud-stage-meter,
      .jp-hud-stage-float,
      .jp-hud-stage-target-card {
        transform: none;
      }

      .jp-hud-orbit-panel {
        display: none;
      }
    }

    @media (max-width: 560px) {
      .jp-hud-modal {
        padding: 8px;
      }

      .jp-hud-modal-shell {
        padding: 12px;
        border-radius: 22px;
      }

      .jp-hud-stage-wrap {
        min-height: 320px;
      }

      .jp-hud-stage {
        width: min(136vw, 760px);
      }

      .jp-hud-stage-label {
        width: auto;
        left: 11%;
        right: 11%;
        bottom: 12%;
      }

      .jp-hud-stage-meter {
        top: 12%;
        right: 11%;
        width: 152px;
      }

      .jp-hud-stage-target-card {
        left: 11%;
        right: 11%;
        bottom: 25%;
        width: auto;
      }

      .jp-hud-stage-float-left,
      .jp-hud-stage-float-right {
        display: none;
      }

      .jp-hud-controls {
        grid-template-columns: 1fr;
      }
    }