.jarvis-hud {
  --hud-color: #00f3ff;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(270px, .85fr) minmax(430px, 1.6fr);
  gap: 18px 28px;
  margin: 18px 0;
  padding: 18px 22px 22px;
  background: rgba(10, 15, 25, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 243, 255, 0.2);
  border-radius: 18px;
  box-shadow: inset 0 0 45px rgba(0, 243, 255, .035), 0 20px 55px rgba(0, 0, 0, .28);
}
.jarvis-hud::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(0,243,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(0,243,255,.025) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(circle at 30% 48%, #000 0, transparent 75%);
}
.jarvis-toolbar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid color-mix(in srgb, var(--hud-color) 22%, transparent); padding-bottom: 12px; }
.jarvis-toolbar > div { display: flex; align-items: baseline; gap: 12px; }
.jarvis-kicker { color: #8294ad; font-size: 10px; letter-spacing: .22em; }
.jarvis-toolbar strong { color: var(--hud-color); font: 800 13px/1 monospace; letter-spacing: .14em; text-shadow: 0 0 14px var(--hud-color); }
.jarvis-sound-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; color: var(--hud-color); border: 1px solid color-mix(in srgb, var(--hud-color) 40%, transparent); border-radius: 999px; background: rgba(0,0,0,.25); font: 700 10px/1 monospace; letter-spacing: .1em; cursor: pointer; }
.jarvis-sound-toggle span:first-child { filter: drop-shadow(0 0 6px var(--hud-color)); }
.jarvis-sound-toggle[aria-pressed="false"] { color: #738096; border-color: rgba(115,128,150,.35); }
.jarvis-reactor-shell { position: relative; min-height: 285px; display: grid; place-items: center; }
#sentinelCoreCanvas { display: block; width: 100%; height: 285px; }
.jarvis-core-label { position: absolute; display: grid; place-items: center; pointer-events: none; color: var(--hud-color); text-align: center; text-shadow: 0 0 15px var(--hud-color); }
.jarvis-core-label span { font: 600 9px/1 monospace; letter-spacing: .32em; }
.jarvis-core-label strong { margin-top: 4px; font: 800 13px/1 monospace; letter-spacing: .12em; }
.jarvis-telemetry { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); align-content: center; gap: 9px; }
.jarvis-telemetry article { min-height: 72px; padding: 13px 15px; border: 1px solid rgba(0,243,255,.12); background: rgba(2,7,14,.52); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.jarvis-telemetry article:last-child { grid-column: 1 / -1; }
.jarvis-telemetry span, .jarvis-telemetry small { display: block; color: #74869f; font: 700 9px/1.4 monospace; letter-spacing: .12em; }
.jarvis-telemetry strong { display: block; margin-top: 7px; color: var(--hud-color); font: 800 16px/1.1 monospace; text-shadow: 0 0 12px color-mix(in srgb, var(--hud-color) 45%, transparent); }
.jarvis-rationale { grid-column: 1 / -1; min-height: 33px; padding: 9px 12px; color: #8fa3bd; border-left: 2px solid var(--hud-color); background: rgba(0,0,0,.2); font: 11px/1.4 monospace; }
.jarvis-shockwave { position: absolute; left: 26%; top: 50%; width: 20px; height: 20px; border: 2px solid #00ff66; border-radius: 50%; opacity: 0; pointer-events: none; transform: translate(-50%,-50%) scale(.1); }
.jarvis-hud[data-state="TRIGGERED"] { --hud-color: #00ff66; }
.jarvis-hud[data-state="EVALUATING"] { --hud-color: #ffb700; }
.jarvis-hud[data-state="VETOED"] { --hud-color: #ff2a2a; }
.jarvis-hud.is-shocking .jarvis-shockwave { animation: jarvis-shock .8s cubic-bezier(.1,.7,.2,1); }
.jarvis-hud.is-vetoing { animation: jarvis-veto .38s ease-out; }
@keyframes jarvis-shock { 0%{opacity:.9;transform:translate(-50%,-50%) scale(.1)} 100%{opacity:0;transform:translate(-50%,-50%) scale(55)} }
@keyframes jarvis-veto { 0%,100%{box-shadow:inset 0 0 45px rgba(255,42,42,.04)} 45%{box-shadow:inset 0 0 95px rgba(255,42,42,.42),0 0 28px rgba(255,42,42,.2)} }
@media (max-width: 850px) { .jarvis-hud { grid-template-columns: 1fr; } .jarvis-reactor-shell { min-height: 235px; } #sentinelCoreCanvas { height: 235px; } }
@media (max-width: 520px) { .jarvis-hud { padding: 14px; } .jarvis-telemetry { grid-template-columns: 1fr; } .jarvis-telemetry article:last-child { grid-column: auto; } .jarvis-toolbar > div { display: grid; gap: 5px; } }
@media (prefers-reduced-motion: reduce) { .jarvis-hud.is-shocking .jarvis-shockwave, .jarvis-hud.is-vetoing { animation: none; } }