:root {
  color-scheme: dark;
  --void: #01050d;
  --navy: #03101e;
  --panel: rgba(4, 22, 39, 0.82);
  --panel-deep: rgba(1, 10, 20, 0.94);
  --cyan: #28e8ff;
  --cyan-soft: #8af7ff;
  --cyan-dim: rgba(40, 232, 255, 0.28);
  --blue: #1689ff;
  --magenta: #ff3ec9;
  --magenta-dim: rgba(255, 62, 201, 0.22);
  --ink: #e4fcff;
  --muted: #7ea8b6;
  --line: rgba(80, 224, 255, 0.28);
  --danger: #ff779e;
  --success: #69ffc7;
  --mono: "Consolas", "Lucida Console", monospace;
  --sans: "Segoe UI", Arial, sans-serif;
  font-family: var(--sans);
  background: var(--void);
  color: var(--ink);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--void);
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 50% -20%, rgba(20, 97, 160, 0.24), transparent 42rem),
    linear-gradient(140deg, #01050b 0%, #020b16 48%, #01040b 100%);
  color: var(--ink);
}

a {
  color: var(--cyan-soft);
}

.site-main {
  width: min(100% - 32px, 760px);
  margin: 7vh auto;
}

.panel {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(5, 21, 38, 0.9);
  box-shadow: 0 0 28px rgba(0, 234, 255, 0.12);
}

h1,
h2 {
  margin-top: 0;
  color: var(--cyan-soft);
}

.muted {
  color: #9ec6d8;
}

.error {
  color: var(--danger);
}

.success {
  color: #55ff89;
}

.info {
  color: var(--cyan-soft);
}

label {
  display: block;
  margin: 14px 0 6px;
  color: #bbffff;
}

input {
  width: 100%;
  padding: 11px;
  border: 1px solid rgba(0, 234, 255, 0.4);
  border-radius: 8px;
  background: #020b17;
  color: #eeffff;
}

input[type="checkbox"] {
  width: auto;
  margin-right: 8px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 18px;
}

button,
.button {
  position: relative;
  overflow: hidden;
  padding: 10px 14px;
  border: 1px solid rgba(0, 234, 255, 0.54);
  border-radius: 8px;
  background: #061b30;
  color: var(--cyan-soft);
  cursor: pointer;
  text-decoration: none;
  transition:
    transform 520ms cubic-bezier(0.2, 1.7, 0.26, 1),
    filter 180ms ease,
    box-shadow 260ms ease,
    border-color 180ms ease;
}

button:hover,
.button:hover {
  transform: translateY(-3px) scale(1.035);
  filter: brightness(1.13);
  box-shadow:
    0 12px 28px rgba(0, 234, 255, 0.24),
    0 0 24px rgba(255, 62, 201, 0.2);
}

button:active,
.button:active {
  transform: translateY(1px) scale(0.965);
  transition-duration: 120ms;
}

.pth-liquid-ripple {
  position: absolute;
  width: 26px;
  height: 18px;
  border-radius: 999px;
  pointer-events: none;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.62), rgba(126, 246, 255, 0.3), rgba(255, 62, 201, 0.18), transparent);
  box-shadow:
    inset 0 0 10px rgba(255, 255, 255, 0.6),
    0 0 24px rgba(125, 243, 255, 0.53);
  transform: translate(-50%, -50%) scale(0.25) rotate(-12deg);
  animation: pth-liquid-ripple 720ms cubic-bezier(0.15, 0.95, 0.28, 1) forwards;
}

ul {
  padding-left: 18px;
}

.flash {
  position: relative;
  z-index: 30;
  width: min(100% - 32px, 680px);
  margin: 14px auto;
  padding: 11px 14px;
  border: 1px solid rgba(0, 234, 255, 0.36);
  border-radius: 4px;
  background: rgba(2, 15, 28, 0.94);
  box-shadow: 0 0 18px rgba(40, 232, 255, 0.14);
  font: 12px/1.5 var(--mono);
  letter-spacing: 0.04em;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  text-align: left;
}

@keyframes pth-liquid-ripple {
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(9) rotate(-12deg);
  }
}

/* Code-native HUD: every line and glow remains crisp at high pixel densities. */
.hud-login-page {
  overflow-x: hidden;
  background:
    linear-gradient(rgba(3, 20, 33, 0.22), rgba(1, 10, 22, 0.48)),
    radial-gradient(ellipse at 34% 26%, rgba(110, 239, 255, 0.34), transparent 38%),
    radial-gradient(ellipse at 68% 55%, rgba(38, 181, 255, 0.3), transparent 50%),
    radial-gradient(ellipse at 78% 20%, rgba(255, 81, 221, 0.25), transparent 36%),
    linear-gradient(135deg, #06253a 0%, #03152b 52%, #100b27 100%);
}

.hud-login-page::before,
.hud-login-page::after {
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  content: "";
}

.hud-login-page::before {
  opacity: 0.56;
  background-image:
    linear-gradient(rgba(136, 240, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(136, 240, 255, 0.1) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

.hud-login-page::after {
  opacity: 0.2;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 3px,
    rgba(151, 230, 255, 0.08) 4px
  );
  mix-blend-mode: screen;
}

.hud-main {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100vh;
  padding: clamp(14px, 2vw, 30px);
}

.hud-backdrop,
.hud-horizon,
.hud-orbit,
.hud-sweep {
  position: fixed;
  pointer-events: none;
}

.hud-backdrop {
  z-index: -1;
  inset: 0;
  overflow: hidden;
}

.hud-horizon {
  bottom: -29vh;
  left: 50%;
  width: min(1420px, 120vw);
  height: 64vh;
  transform: translateX(-50%) perspective(340px) rotateX(62deg);
  transform-origin: center bottom;
  opacity: 0.58;
  background-image:
    linear-gradient(rgba(46, 190, 255, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 190, 255, 0.18) 1px, transparent 1px);
  background-size: 72px 50px;
  box-shadow: 0 -1px 20px rgba(40, 232, 255, 0.28);
}

.hud-orbit {
  border: 1px solid rgba(48, 204, 255, 0.2);
  border-radius: 50%;
}

.hud-orbit-one {
  top: -18vw;
  right: -16vw;
  width: 61vw;
  height: 61vw;
}

.hud-orbit-two {
  top: 3vw;
  right: -27vw;
  width: 79vw;
  height: 79vw;
  border-color: rgba(255, 62, 201, 0.12);
}

.hud-orbit-three {
  bottom: -34vw;
  left: -16vw;
  width: 52vw;
  height: 52vw;
  border-style: dashed;
}

.hud-sweep {
  top: -20%;
  left: 58%;
  width: 1px;
  height: 140%;
  transform: rotate(35deg);
  background: linear-gradient(transparent, rgba(40, 232, 255, 0.7), transparent);
  box-shadow: 0 0 25px rgba(40, 232, 255, 0.55);
  opacity: 0.38;
}

.hud-aurora {
  position: fixed;
  filter: blur(38px);
  opacity: 0.86;
  mix-blend-mode: screen;
}

.hud-aurora-cyan {
  top: -2%;
  left: 2%;
  width: 58vw;
  height: 52vw;
  background: radial-gradient(ellipse, rgba(68, 230, 255, 0.5), rgba(0, 162, 255, 0.18) 44%, transparent 72%);
}

.hud-aurora-magenta {
  right: 2%;
  bottom: -10%;
  width: 57vw;
  height: 56vw;
  background: radial-gradient(ellipse, rgba(255, 65, 210, 0.36), rgba(107, 35, 255, 0.16) 45%, transparent 73%);
}

.hud-vector-field {
  position: fixed;
  inset: -18%;
  opacity: 0.42;
  background:
    linear-gradient(25deg, transparent 32%, rgba(40, 232, 255, 0.32) 32.1%, transparent 32.35%),
    linear-gradient(145deg, transparent 61%, rgba(255, 62, 201, 0.24) 61.1%, transparent 61.35%),
    repeating-radial-gradient(circle at 77% 54%, transparent 0 84px, rgba(40, 232, 255, 0.14) 85px 86px);
}

.hud-bubble-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.hud-bubble-field i {
  position: absolute;
  display: block;
  border: 1px solid rgba(188, 252, 255, 0.32);
  border-radius: 50%;
  background:
    radial-gradient(circle at 25% 20%, rgba(255, 255, 255, 0.58) 0 2%, rgba(202, 255, 255, 0.2) 5%, transparent 15%),
    radial-gradient(circle at 65% 72%, rgba(39, 198, 255, 0.12), transparent 46%),
    rgba(79, 224, 255, 0.035);
  box-shadow:
    inset 7px 8px 18px rgba(214, 255, 255, 0.12),
    inset -8px -10px 20px rgba(44, 133, 255, 0.1),
    0 0 18px rgba(93, 229, 255, 0.12);
  backdrop-filter: blur(2px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .command-deck,
  .command-header,
  .command-footer,
  .hud-panel,
  .access-terminal,
  .hud-input,
  .readout-grid div,
  .protocol-list div {
    background-color: rgba(8, 45, 72, 0.62);
  }

  .hud-bubble-field i {
    background-color: rgba(85, 210, 240, 0.12);
  }
}

.hud-bubble-field i:nth-child(1) {
  top: 9%;
  left: 3%;
  width: 106px;
  height: 106px;
}

.hud-bubble-field i:nth-child(2) {
  top: 4%;
  left: 24%;
  width: 48px;
  height: 48px;
}

.hud-bubble-field i:nth-child(3) {
  top: 19%;
  right: 4%;
  width: 162px;
  height: 162px;
}

.hud-bubble-field i:nth-child(4) {
  right: 15%;
  bottom: 13%;
  width: 78px;
  height: 78px;
}

.hud-bubble-field i:nth-child(5) {
  bottom: 6%;
  left: 7%;
  width: 186px;
  height: 186px;
}

.hud-bubble-field i:nth-child(6) {
  top: 47%;
  left: 1%;
  width: 62px;
  height: 62px;
}

.hud-bubble-field i:nth-child(7) {
  top: 8%;
  right: 28%;
  width: 72px;
  height: 72px;
}

.hud-bubble-field i:nth-child(8) {
  right: 2%;
  bottom: 42%;
  width: 38px;
  height: 38px;
}

.command-deck {
  position: relative;
  width: min(100%, 1740px);
  min-height: calc(100vh - clamp(28px, 4vw, 60px));
  margin: auto;
  padding: 14px;
  border: 1px solid rgba(60, 220, 255, 0.22);
  background:
    linear-gradient(90deg, rgba(40, 232, 255, 0.04) 1px, transparent 1px),
    linear-gradient(rgba(40, 232, 255, 0.04) 1px, transparent 1px),
    rgba(10, 51, 77, 0.12);
  background-size: 22px 22px;
  backdrop-filter: blur(4px) saturate(150%);
  box-shadow:
    inset 0 0 80px rgba(67, 213, 255, 0.08),
    0 0 60px rgba(0, 0, 0, 0.22);
  clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px);
}

.command-deck::before,
.command-deck::after {
  position: absolute;
  width: 108px;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), transparent);
  box-shadow: 0 0 14px var(--cyan);
  content: "";
}

.command-deck::before {
  top: 0;
  left: 42px;
}

.command-deck::after {
  right: 42px;
  bottom: 0;
  transform: rotate(180deg);
}

.command-header,
.command-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 16px;
  border: 1px solid rgba(52, 218, 255, 0.22);
  background:
    linear-gradient(110deg, rgba(175, 248, 255, 0.14), transparent 26%),
    linear-gradient(90deg, rgba(18, 88, 120, 0.42), rgba(8, 36, 61, 0.24));
  backdrop-filter: blur(12px) saturate(160%);
  font: 10px/1.2 var(--mono);
  letter-spacing: 0.12em;
}

.command-header {
  min-height: 70px;
  border-bottom-color: rgba(40, 232, 255, 0.58);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}

.brand-cluster,
.header-telemetry,
.sync-readout {
  display: flex;
  align-items: center;
}

.brand-cluster {
  gap: 13px;
}

.brand-sigil {
  position: relative;
  display: block;
  width: 42px;
  height: 42px;
  border: 1px solid var(--cyan);
  transform: rotate(45deg);
  box-shadow:
    inset 0 0 14px rgba(40, 232, 255, 0.32),
    0 0 18px rgba(40, 232, 255, 0.38);
}

.brand-sigil::before,
.brand-sigil::after,
.brand-sigil i,
.brand-sigil b {
  position: absolute;
  content: "";
}

.brand-sigil::before {
  inset: 7px;
  border: 1px solid rgba(255, 62, 201, 0.84);
}

.brand-sigil::after {
  inset: 14px;
  background: var(--cyan-soft);
  box-shadow: 0 0 12px var(--cyan);
}

.brand-sigil i,
.brand-sigil b {
  top: 19px;
  width: 12px;
  height: 2px;
  background: var(--cyan);
}

.brand-sigil i {
  left: -7px;
}

.brand-sigil b {
  right: -7px;
}

.micro-label {
  margin: 0;
  color: #6e9dae;
  font: 9px/1.45 var(--mono);
  letter-spacing: 0.16em;
}

.brand-name {
  margin: 4px 0 0;
  color: var(--ink);
  font: 700 20px/1 var(--sans);
  letter-spacing: 0.25em;
}

.brand-name span {
  color: var(--cyan);
  text-shadow: 0 0 14px rgba(40, 232, 255, 0.74);
}

.header-telemetry {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: clamp(12px, 2vw, 28px);
  color: #8fc7d5;
}

.header-telemetry b {
  color: var(--cyan);
}

.signal-dot,
.live-chip i,
.form-assist i,
.command-footer i {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 10px var(--success);
  vertical-align: 1px;
}

.deck-grid {
  display: grid;
  grid-template-columns: minmax(235px, 0.9fr) minmax(430px, 1.42fr) minmax(235px, 0.9fr);
  grid-template-rows: minmax(600px, 1fr) 156px;
  gap: 12px;
  min-height: calc(100vh - 184px);
  padding: 12px 0;
}

.hud-panel,
.access-terminal {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(ellipse at 18% 4%, rgba(210, 255, 255, 0.2), transparent 25%),
    radial-gradient(ellipse at 86% 95%, rgba(255, 99, 226, 0.13), transparent 36%),
    linear-gradient(140deg, rgba(115, 231, 255, 0.15), transparent 34%),
    linear-gradient(320deg, rgba(255, 62, 201, 0.1), transparent 38%),
    rgba(17, 73, 103, 0.2);
  backdrop-filter: blur(8px) saturate(185%);
  box-shadow:
    inset 0 1px 0 rgba(218, 255, 255, 0.38),
    inset 0 0 38px rgba(78, 221, 255, 0.12),
    0 0 26px rgba(31, 204, 255, 0.14);
}

.hud-panel::before,
.hud-panel::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.hud-panel::before {
  inset: 0;
  opacity: 0.54;
  background:
    linear-gradient(90deg, transparent 49%, rgba(40, 232, 255, 0.12) 50%, transparent 51%),
    linear-gradient(transparent 49%, rgba(40, 232, 255, 0.08) 50%, transparent 51%);
  background-size: 36px 36px;
}

.hud-panel::after {
  top: -24%;
  left: -16%;
  width: 76%;
  height: 52%;
  border: 1px solid rgba(208, 255, 255, 0.15);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(218, 255, 255, 0.13), transparent 68%);
  filter: blur(2px);
  transform: rotate(-16deg);
}

.telemetry-primary {
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}

.telemetry-secondary {
  clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%, 0 18px);
}

.panel-corner {
  position: absolute;
  z-index: 3;
  width: 46px;
  height: 46px;
  pointer-events: none;
}

.corner-top-left {
  top: 8px;
  left: 8px;
  border-top: 2px solid var(--cyan);
  border-left: 2px solid var(--cyan);
}

.corner-top-right {
  top: 8px;
  right: 8px;
  border-top: 2px solid var(--cyan);
  border-right: 2px solid var(--cyan);
}

.corner-bottom-left {
  bottom: 8px;
  left: 8px;
  border-bottom: 2px solid var(--magenta);
  border-left: 2px solid var(--magenta);
}

.corner-bottom-right {
  right: 8px;
  bottom: 8px;
  border-right: 2px solid var(--magenta);
  border-bottom: 2px solid var(--magenta);
}

.panel-heading {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 18px 12px;
  border-bottom: 1px solid rgba(40, 232, 255, 0.2);
}

.panel-heading.compact {
  padding: 15px 16px 10px;
}

.panel-heading h2,
.node-sync h2 {
  margin: 4px 0 0;
  color: #c9faff;
  font: 700 14px/1 var(--sans);
  letter-spacing: 0.18em;
}

.live-chip {
  display: flex;
  gap: 7px;
  align-items: center;
  color: var(--success);
  font: 9px/1 var(--mono);
  letter-spacing: 0.12em;
}

.live-chip i {
  width: 5px;
  height: 5px;
}

.core-gauge {
  position: relative;
  z-index: 2;
  display: grid;
  width: clamp(168px, 16vw, 222px);
  height: clamp(168px, 16vw, 222px);
  margin: 34px auto 28px;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 46%, rgba(40, 232, 255, 0.16) 47%, transparent 49%),
    repeating-conic-gradient(from -11deg, rgba(40, 232, 255, 0.8) 0 1.1deg, transparent 1.1deg 6deg);
  box-shadow:
    0 0 42px rgba(40, 232, 255, 0.48),
    0 0 78px rgba(40, 232, 255, 0.16),
    inset 0 0 30px rgba(40, 232, 255, 0.18);
}

.core-gauge::before,
.core-gauge::after,
.gauge-track {
  position: absolute;
  border-radius: 50%;
  content: "";
}

.core-gauge::before {
  inset: 13%;
  border: 2px solid rgba(40, 232, 255, 0.76);
  box-shadow:
    0 0 14px rgba(40, 232, 255, 0.74),
    inset 0 0 14px rgba(40, 232, 255, 0.34);
}

.core-gauge::after {
  inset: 24%;
  border: 1px solid rgba(255, 62, 201, 0.74);
  box-shadow: 0 0 18px rgba(255, 62, 201, 0.48);
}

.gauge-track {
  inset: -8px;
  border: 1px dashed rgba(109, 234, 255, 0.42);
}

.gauge-inner {
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gauge-value {
  color: #e7feff;
  font: 700 42px/1 var(--sans);
  letter-spacing: -0.08em;
  text-shadow: 0 0 16px var(--cyan);
}

.gauge-value span {
  color: var(--cyan);
  font-size: 17px;
}

.gauge-caption {
  margin-top: 6px;
  color: var(--cyan-soft);
  font: 9px/1 var(--mono);
  letter-spacing: 0.18em;
}

.gauge-tick {
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
}

.tick-one {
  top: 18%;
  right: 15%;
}

.tick-two {
  right: -2%;
  bottom: 42%;
}

.tick-three {
  bottom: 12%;
  left: 20%;
  background: var(--magenta);
  box-shadow: 0 0 12px var(--magenta);
}

.readout-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 0 18px 22px;
  border: 1px solid rgba(40, 232, 255, 0.18);
  background: rgba(145, 247, 255, 0.22);
}

.readout-grid div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px;
  background: rgba(3, 30, 47, 0.5);
  backdrop-filter: blur(6px);
}

.readout-grid span,
.meter-row span,
.meter-row em {
  color: #7299a8;
  font: 9px/1 var(--mono);
  letter-spacing: 0.08em;
}

.readout-grid b {
  color: var(--success);
  font: 11px/1 var(--mono);
  letter-spacing: 0.12em;
}

.readout-grid b.cyan {
  color: var(--cyan);
}

.meter-stack {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 11px;
  margin: 0 18px;
}

.meter-row {
  display: grid;
  grid-template-columns: 64px 1fr 20px;
  gap: 8px;
  align-items: center;
}

.meter-row i {
  display: block;
  height: 4px;
  background: rgba(136, 240, 255, 0.22);
}

.meter-row b {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--magenta));
  box-shadow:
    0 0 9px rgba(40, 232, 255, 0.8),
    0 0 18px rgba(255, 62, 201, 0.34);
}

.meter-88 {
  width: 88%;
}

.meter-96 {
  width: 96%;
}

.meter-79 {
  width: 79%;
}

.access-terminal {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: clamp(22px, 4vh, 42px) clamp(24px, 4vw, 64px) 24px;
  border-color: rgba(40, 232, 255, 0.54);
  background:
    radial-gradient(ellipse at 17% 2%, rgba(224, 255, 255, 0.18), transparent 25%),
    radial-gradient(circle at 50% 37%, rgba(64, 204, 255, 0.12), transparent 38%),
    linear-gradient(150deg, rgba(84, 208, 255, 0.1), transparent 26%),
    linear-gradient(320deg, rgba(255, 62, 201, 0.09), transparent 38%),
    rgba(5, 39, 64, 0.26);
  backdrop-filter: blur(8px) saturate(185%);
  box-shadow:
    inset 0 1px 0 rgba(221, 255, 255, 0.38),
    inset 0 0 58px rgba(56, 213, 255, 0.12),
    0 0 34px rgba(40, 232, 255, 0.2);
  clip-path: polygon(17px 0, calc(100% - 17px) 0, 100% 17px, 100% calc(100% - 17px), calc(100% - 17px) 100%, 17px 100%, 0 calc(100% - 17px), 0 17px);
}

.access-terminal::before,
.access-terminal::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.access-terminal::before {
  inset: 10px;
  border: 1px solid rgba(40, 232, 255, 0.12);
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
}

.access-terminal::after {
  top: 40%;
  left: 0;
  width: 100%;
  height: 1px;
  opacity: 0.34;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  box-shadow: 0 0 18px var(--cyan);
}

.terminal-edge {
  position: absolute;
  top: 16%;
  width: 3px;
  height: 68%;
  background: linear-gradient(transparent, var(--cyan), var(--magenta), transparent);
  box-shadow: 0 0 11px rgba(40, 232, 255, 0.64);
}

.terminal-edge-left {
  left: 0;
}

.terminal-edge-right {
  right: 0;
}

.terminal-topline,
.terminal-footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: #7aa8b8;
  font: 9px/1 var(--mono);
  letter-spacing: 0.15em;
}

.terminal-hologram {
  position: absolute;
  top: 18%;
  left: 50%;
  width: min(82%, 610px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  opacity: 0.16;
  pointer-events: none;
}

.terminal-hologram::before,
.terminal-hologram::after,
.terminal-hologram i,
.terminal-hologram b {
  position: absolute;
  border-radius: 50%;
  content: "";
}

.terminal-hologram::before {
  inset: 5%;
  border: 1px dashed var(--cyan);
}

.terminal-hologram::after {
  inset: 19%;
  border: 1px solid rgba(255, 62, 201, 0.9);
}

.terminal-hologram i {
  inset: 32%;
  border: 1px dashed rgba(40, 232, 255, 0.9);
}

.terminal-hologram i:nth-child(2) {
  inset: 44%;
  border-style: solid;
}

.terminal-hologram i:nth-child(3) {
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  border-radius: 0;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
}

.terminal-hologram i:nth-child(4) {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  border-radius: 0;
  background: linear-gradient(transparent, var(--magenta), transparent);
}

.terminal-hologram b {
  width: 10px;
  height: 10px;
  border: 1px solid var(--cyan);
  background: var(--cyan);
  box-shadow: 0 0 14px var(--cyan);
}

.terminal-hologram b:nth-of-type(1) {
  top: 16%;
  left: 28%;
}

.terminal-hologram b:nth-of-type(2) {
  top: 58%;
  right: 12%;
  background: var(--magenta);
  box-shadow: 0 0 14px var(--magenta);
}

.terminal-hologram b:nth-of-type(3) {
  bottom: 14%;
  left: 20%;
}

.terminal-dots {
  display: flex;
  gap: 5px;
}

.terminal-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}

.terminal-dots i:nth-child(2) {
  background: var(--magenta);
  box-shadow: 0 0 8px var(--magenta);
}

.terminal-brand {
  position: relative;
  z-index: 2;
  margin: clamp(20px, 4vh, 40px) 0 26px;
  text-align: center;
}

.terminal-icon {
  position: relative;
  display: block;
  width: 68px;
  height: 68px;
  margin: 0 auto 16px;
  border: 1px solid var(--cyan);
  transform: rotate(45deg);
  box-shadow:
    inset 0 0 22px rgba(40, 232, 255, 0.32),
    0 0 22px rgba(40, 232, 255, 0.68),
    0 0 48px rgba(255, 62, 201, 0.22);
}

.terminal-icon::before,
.terminal-icon::after,
.terminal-icon i,
.terminal-icon b,
.terminal-icon em {
  position: absolute;
  content: "";
}

.terminal-icon::before {
  inset: 9px;
  border: 1px solid rgba(255, 62, 201, 0.72);
}

.terminal-icon::after {
  top: 50%;
  left: -10px;
  width: calc(100% + 20px);
  height: 1px;
  background: var(--cyan);
  box-shadow: 0 0 11px var(--cyan);
}

.terminal-icon i {
  top: -6px;
  left: -6px;
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--cyan);
  border-left: 2px solid var(--cyan);
}

.terminal-icon b {
  right: -6px;
  bottom: -6px;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--magenta);
  border-bottom: 2px solid var(--magenta);
}

.terminal-icon em {
  inset: 24px;
  border-radius: 50%;
  background: var(--cyan-soft);
  box-shadow: 0 0 14px var(--cyan);
}

.terminal-brand h1 {
  margin: 8px 0 6px;
  color: #e6feff;
  font: 800 clamp(30px, 4vw, 48px)/1 var(--sans);
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-shadow: 0 0 20px rgba(40, 232, 255, 0.38);
}

.terminal-brand h1 span {
  color: var(--cyan);
  text-shadow: 0 0 18px rgba(40, 232, 255, 0.78);
}

.terminal-copy {
  margin: 12px 0 0;
  color: #94bdc8;
  font: 11px/1.5 var(--mono);
  letter-spacing: 0.07em;
}

.access-form {
  position: relative;
  z-index: 3;
  width: min(100%, 520px);
  margin: 0 auto;
}

.field-group {
  margin-bottom: 17px;
}

.field-heading,
.form-assist {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.field-heading {
  margin: 0 1px 7px;
}

.field-heading label {
  margin: 0;
  color: var(--cyan-soft);
  font: 10px/1 var(--mono);
  letter-spacing: 0.14em;
}

.field-heading span {
  color: rgba(40, 232, 255, 0.58);
  font: 10px/1 var(--mono);
}

.hud-input-wrap {
  position: relative;
}

.hud-input {
  height: 50px;
  padding: 0 42px 0 46px;
  border: 1px solid rgba(40, 232, 255, 0.4);
  border-radius: 0;
  outline: none;
  background:
    linear-gradient(90deg, rgba(159, 247, 255, 0.11), transparent 34%),
    rgba(4, 30, 49, 0.46);
  backdrop-filter: blur(9px) saturate(160%);
  color: #e4fcff;
  font: 13px/1 var(--mono);
  letter-spacing: 0.04em;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.hud-input::placeholder {
  color: rgba(136, 187, 200, 0.52);
}

.hud-input:focus {
  border-color: var(--cyan);
  background-color: rgba(22, 94, 122, 0.54);
  box-shadow:
    inset 0 0 18px rgba(40, 232, 255, 0.1),
    0 0 16px rgba(40, 232, 255, 0.18);
}

.field-icon {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 16px;
  width: 20px;
  color: var(--cyan);
  font: 700 18px/1 var(--mono);
  text-shadow: 0 0 10px var(--cyan);
}

.field-icon-lock {
  top: 16px;
  left: 17px;
  width: 14px;
  height: 12px;
  border: 1px solid var(--cyan);
  border-radius: 2px;
}

.field-icon-lock::before {
  position: absolute;
  top: -8px;
  left: 2px;
  width: 8px;
  height: 8px;
  border: 1px solid var(--cyan);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  content: "";
}

.hud-input-wrap > i {
  position: absolute;
  right: 17px;
  bottom: 17px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 9px var(--cyan);
}

.form-error {
  margin: 7px 0 0;
  font: 10px/1.35 var(--mono);
  letter-spacing: 0.04em;
}

.form-assist {
  gap: 14px;
  margin: 3px 0 18px;
  color: var(--success);
  font: 9px/1.3 var(--mono);
  letter-spacing: 0.08em;
}

.form-assist i {
  width: 5px;
  height: 5px;
  margin-right: 4px;
}

.form-assist a,
.terminal-footer a {
  color: var(--cyan-soft);
  font: inherit;
  text-decoration: none;
  transition:
    color 160ms ease,
    text-shadow 160ms ease;
}

.form-assist a:hover,
.terminal-footer a:hover {
  color: #fff;
  text-shadow: 0 0 9px var(--cyan);
}

.access-submit {
  width: 100%;
  height: 54px;
  border: 1px solid var(--cyan);
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(40, 232, 255, 0.2), rgba(9, 88, 125, 0.5), rgba(255, 62, 201, 0.14)),
    rgba(4, 31, 50, 0.92);
  color: #e9feff;
  cursor: pointer;
  font: 700 13px/1 var(--mono);
  letter-spacing: 0.24em;
  text-shadow: 0 0 9px var(--cyan);
  text-transform: uppercase;
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
  transition:
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.access-submit:hover,
.access-submit:focus-visible {
  background:
    linear-gradient(90deg, rgba(40, 232, 255, 0.34), rgba(11, 113, 153, 0.7), rgba(255, 62, 201, 0.24)),
    rgba(4, 31, 50, 0.98);
  box-shadow: 0 0 20px rgba(40, 232, 255, 0.34);
  transform: translateY(-1px);
}

.terminal-footer {
  width: min(100%, 520px);
  margin: auto auto 0;
  padding-top: 18px;
  border-top: 1px solid rgba(40, 232, 255, 0.18);
}

.terminal-footer a {
  color: var(--magenta);
}

.terminal-footer a i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 5px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

.data-pulse {
  display: flex;
  gap: 4px;
  align-items: end;
  height: 19px;
}

.data-pulse i {
  width: 3px;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}

.data-pulse i:nth-child(1) {
  height: 9px;
}

.data-pulse i:nth-child(2) {
  height: 18px;
  background: var(--magenta);
}

.data-pulse i:nth-child(3) {
  height: 13px;
}

.network-map {
  position: relative;
  z-index: 2;
  width: min(78%, 270px);
  aspect-ratio: 1;
  margin: 24px auto 10px;
  border: 1px dashed rgba(40, 232, 255, 0.25);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(40, 232, 255, 0.1) 0 1px, transparent 2px),
    radial-gradient(circle, transparent 39%, rgba(40, 232, 255, 0.2) 40%, transparent 41%),
    radial-gradient(circle, transparent 65%, rgba(255, 62, 201, 0.15) 66%, transparent 67%);
  background-size: 16px 16px, auto, auto;
  box-shadow:
    inset 0 0 36px rgba(40, 232, 255, 0.1),
    0 0 36px rgba(40, 232, 255, 0.22);
}

.network-map::before,
.network-map::after {
  position: absolute;
  border: 1px solid rgba(40, 232, 255, 0.28);
  border-radius: 50%;
  content: "";
}

.network-map::before {
  inset: 14%;
}

.network-map::after {
  inset: 31%;
  border-color: rgba(255, 62, 201, 0.38);
}

.map-core,
.map-node {
  position: absolute;
  z-index: 3;
  border: 1px solid var(--cyan);
  border-radius: 50%;
  background: rgba(2, 20, 33, 0.94);
  box-shadow: 0 0 12px rgba(40, 232, 255, 0.66);
}

.map-core {
  top: 50%;
  left: 50%;
  display: grid;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  place-items: center;
}

.map-core em {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--magenta);
  box-shadow: 0 0 14px var(--magenta);
}

.map-node {
  width: 10px;
  height: 10px;
}

.node-alpha {
  top: 10%;
  left: 47%;
}

.node-beta {
  top: 34%;
  right: 11%;
}

.node-gamma {
  bottom: 13%;
  left: 30%;
}

.node-delta {
  top: 45%;
  left: 8%;
}

.map-line {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 43%;
  height: 1px;
  transform-origin: left;
  background: linear-gradient(90deg, var(--cyan), transparent);
}

.line-one {
  transform: rotate(-80deg);
}

.line-two {
  transform: rotate(5deg);
}

.line-three {
  transform: rotate(145deg);
}

.data-bars {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 5px;
  align-items: end;
  height: 64px;
  margin: 0 20px 20px;
  padding: 8px 9px 5px;
  border-right: 1px solid rgba(40, 232, 255, 0.22);
  border-left: 1px solid rgba(40, 232, 255, 0.22);
  background: linear-gradient(transparent 49%, rgba(40, 232, 255, 0.1) 50%, transparent 51%);
  background-size: 100% 15px;
}

.data-bars i {
  flex: 1;
  height: var(--bar);
  background: linear-gradient(to top, var(--magenta), var(--cyan));
  box-shadow:
    0 0 10px rgba(40, 232, 255, 0.8),
    0 0 20px rgba(255, 62, 201, 0.32);
}

.protocol-list {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1px;
  margin: 0 18px;
  background: rgba(40, 232, 255, 0.16);
}

.protocol-list div {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 11px 9px;
  background: rgba(3, 30, 47, 0.48);
  backdrop-filter: blur(6px);
  color: #a2cdd6;
  font: 9px/1 var(--mono);
  letter-spacing: 0.06em;
}

.protocol-list i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
}

.protocol-list b {
  color: var(--success);
  font-size: 9px;
}

.spectral-trace {
  position: relative;
  z-index: 2;
  margin: 30px 18px 0;
  padding: 11px 10px 8px;
  border: 1px solid rgba(40, 232, 255, 0.2);
  background:
    linear-gradient(rgba(40, 232, 255, 0.08) 1px, transparent 1px),
    rgba(1, 12, 24, 0.32);
  background-size: 100% 17px;
}

.trace-label {
  display: block;
  margin-bottom: 7px;
  color: #7daab8;
  font: 8px/1 var(--mono);
  letter-spacing: 0.12em;
}

.trace-bars {
  display: flex;
  gap: 4px;
  align-items: end;
  height: 74px;
}

.trace-bars i {
  flex: 1;
  height: var(--trace);
  background: linear-gradient(to top, var(--magenta), var(--cyan-soft));
  box-shadow:
    0 0 10px rgba(40, 232, 255, 0.88),
    0 0 20px rgba(255, 62, 201, 0.36);
}

.micro-console {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  margin: 16px 18px 0;
  padding: 12px 10px;
  border-left: 1px solid var(--magenta);
  background: linear-gradient(90deg, rgba(255, 62, 201, 0.08), transparent);
  color: #749ba8;
  font: 8px/1 var(--mono);
  letter-spacing: 0.11em;
}

.micro-console b {
  color: var(--cyan-soft);
  font-weight: 400;
}

.coordinate-strip {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: space-between;
  margin: 24px 18px 0;
  color: var(--cyan-soft);
  font: 8px/1 var(--mono);
  letter-spacing: 0.08em;
}

.coordinate-strip i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--magenta), var(--cyan));
  box-shadow: 0 0 8px rgba(40, 232, 255, 0.62);
}

.lower-panel {
  min-height: 140px;
}

.system-events {
  grid-column: span 2;
}

.event-stream {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 4px;
  padding: 12px 16px;
}

.event-stream p {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  gap: 12px;
  margin: 0;
  color: #7faab8;
  font: 10px/1.35 var(--mono);
  letter-spacing: 0.06em;
}

.event-stream time {
  color: var(--cyan);
}

.event-stream b {
  color: var(--success);
  font-size: 9px;
}

.event-stream b.magenta {
  color: var(--magenta);
}

.node-sync {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 18px;
}

.sync-readout {
  gap: 10px;
}

.sync-ring {
  position: relative;
  display: grid;
  width: 64px;
  height: 64px;
  border: 1px dashed var(--cyan);
  border-radius: 50%;
  place-items: center;
}

.sync-ring::before {
  width: 42px;
  height: 42px;
  border: 2px solid var(--magenta);
  border-right-color: transparent;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255, 62, 201, 0.44);
  content: "";
}

.sync-ring i {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
}

.sync-readout p {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}

.sync-readout b {
  color: var(--cyan-soft);
  font: 700 20px/1 var(--mono);
  text-shadow: 0 0 10px var(--cyan);
}

.sync-readout span {
  color: #88aeba;
  font: 9px/1 var(--mono);
  letter-spacing: 0.1em;
}

.command-footer {
  min-height: 38px;
  color: #7fa6b2;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px));
}

.command-footer i {
  width: 5px;
  height: 5px;
  margin-right: 5px;
}

@media (max-width: 1160px) {
  .hud-aurora-cyan {
    top: 0;
    left: -18%;
    width: 88vw;
    height: 72vw;
  }

  .hud-aurora-magenta {
    right: -20%;
    bottom: 0;
    width: 86vw;
    height: 82vw;
  }

  .hud-bubble-field i:nth-child(3),
  .hud-bubble-field i:nth-child(5) {
    transform: scale(0.72);
  }

  .deck-grid {
    grid-template-columns: minmax(210px, 0.8fr) minmax(430px, 1.35fr);
    grid-template-rows: minmax(600px, auto) auto auto;
  }

  .telemetry-secondary {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: 1.1fr 0.9fr 1.1fr;
    gap: 16px;
    align-items: center;
    padding: 10px 12px;
  }

  .telemetry-secondary .panel-heading {
    border-bottom: 0;
  }

  .network-map {
    width: min(100%, 176px);
    margin: 5px auto;
  }

  .data-bars {
    margin: 12px 0;
  }

  .protocol-list {
    margin: 0;
  }

  .system-events {
    grid-column: auto;
  }
}

@media (max-width: 780px) {
  .hud-login-page {
    background:
      linear-gradient(rgba(9, 42, 66, 0.32), rgba(3, 20, 42, 0.54)),
      radial-gradient(ellipse at 20% 16%, rgba(110, 239, 255, 0.42), transparent 44%),
      radial-gradient(ellipse at 80% 55%, rgba(255, 81, 221, 0.28), transparent 44%),
      linear-gradient(135deg, #073451 0%, #041b34 58%, #160d32 100%);
  }

  .hud-bubble-field i:nth-child(1) {
    top: 4%;
    left: -10px;
    width: 78px;
    height: 78px;
  }

  .hud-bubble-field i:nth-child(2),
  .hud-bubble-field i:nth-child(6),
  .hud-bubble-field i:nth-child(8) {
    display: none;
  }

  .hud-bubble-field i:nth-child(3) {
    top: 14%;
    right: -58px;
    width: 126px;
    height: 126px;
    transform: none;
  }

  .hud-bubble-field i:nth-child(4) {
    right: 8%;
    bottom: 28%;
    width: 56px;
    height: 56px;
  }

  .hud-bubble-field i:nth-child(5) {
    bottom: 5%;
    left: -52px;
    width: 138px;
    height: 138px;
    transform: none;
  }

  .hud-bubble-field i:nth-child(7) {
    top: 54%;
    right: 3%;
    width: 52px;
    height: 52px;
  }

  .hud-main {
    padding: 8px;
  }

  .command-deck {
    width: 100%;
    max-width: 100%;
    padding: 8px;
    background-size: 18px 18px;
  }

  .command-header {
    min-height: 62px;
    padding: 9px 12px;
    overflow: hidden;
  }

  .brand-name {
    font-size: 15px;
    letter-spacing: 0.14em;
  }

  .brand-sigil {
    width: 32px;
    height: 32px;
  }

  .brand-sigil::after {
    inset: 10px;
  }

  .brand-sigil i,
  .brand-sigil b {
    top: 14px;
  }

  .header-telemetry span:not(:first-child) {
    display: none;
  }

  .deck-grid {
    display: flex;
    width: 100%;
    min-height: auto;
    flex-direction: column;
  }

  .hud-panel,
  .access-terminal,
  .access-form,
  .terminal-footer {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .access-terminal {
    min-height: 620px;
    order: -2;
    padding: 24px 19px 20px;
  }

  .telemetry-primary {
    order: -1;
  }

  .telemetry-secondary {
    display: block;
  }

  .network-map {
    width: min(68%, 218px);
    margin: 18px auto;
  }

  .system-events {
    display: none;
  }

  .command-footer {
    display: none;
  }

  .terminal-brand {
    margin-top: 28px;
  }

  .terminal-icon {
    width: 56px;
    height: 56px;
  }

  .terminal-icon em {
    inset: 20px;
  }

  .terminal-brand h1 {
    font-size: 31px;
    letter-spacing: 0.18em;
    text-indent: 0.18em;
    overflow-wrap: anywhere;
  }

  .terminal-copy {
    max-width: 330px;
    margin-right: auto;
    margin-left: auto;
  }

  .form-assist {
    align-items: flex-start;
    flex-direction: column;
  }

  .node-sync {
    min-height: 110px;
  }
}

@media (max-width: 560px) {
  .command-header {
    gap: 10px;
  }

  .header-telemetry {
    display: none;
  }

  .brand-cluster {
    gap: 10px;
    min-width: 0;
  }

  .brand-cluster > div {
    min-width: 0;
  }

  .brand-name {
    font-size: 14px;
    letter-spacing: 0.09em;
    overflow-wrap: anywhere;
  }

  .micro-label {
    letter-spacing: 0.08em;
  }

  .terminal-topline {
    gap: 8px;
    font-size: 7px;
  }

  .terminal-topline span:last-child {
    display: none;
  }

  .terminal-brand h1 {
    font-size: 24px;
    letter-spacing: 0.1em;
    text-indent: 0;
  }

  .terminal-brand h1 span {
    display: block;
    margin-top: 6px;
  }

  .terminal-copy {
    font-size: 10px;
  }

  .hud-input {
    height: 48px;
    padding-right: 34px;
  }

  .access-submit {
    height: 52px;
  }

  .terminal-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 420px) {
  .terminal-brand h1 {
    font-size: 22px;
    letter-spacing: 0.06em;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hud-sweep {
    animation: scan-sweep 8s linear infinite;
  }

  .core-gauge,
  .sync-ring {
    animation: hud-rotate 20s linear infinite;
  }

  .gauge-inner,
  .sync-ring i {
    animation: hud-counter-rotate 20s linear infinite;
  }

  .signal-dot,
  .live-chip i,
  .form-assist i,
  .protocol-list i,
  .command-footer i {
    animation: signal-pulse 2s ease-in-out infinite;
  }

  .data-bars i:nth-child(3n + 1) {
    animation: data-breathe 2.8s ease-in-out infinite alternate;
  }

  .data-bars i:nth-child(3n + 2) {
    animation: data-breathe 3.4s ease-in-out 400ms infinite alternate;
  }

  .data-bars i:nth-child(3n) {
    animation: data-breathe 2.2s ease-in-out 800ms infinite alternate;
  }

  .trace-bars i:nth-child(3n + 1) {
    animation: data-breathe 2.6s ease-in-out infinite alternate;
  }

  .trace-bars i:nth-child(3n + 2) {
    animation: data-breathe 3.1s ease-in-out 360ms infinite alternate;
  }

  .trace-bars i:nth-child(3n) {
    animation: data-breathe 2.3s ease-in-out 720ms infinite alternate;
  }

  .terminal-hologram::before,
  .terminal-hologram::after {
    animation: hud-rotate 28s linear infinite;
  }
}

@keyframes scan-sweep {
  from {
    transform: translateX(-42vw) rotate(35deg);
  }
  to {
    transform: translateX(42vw) rotate(35deg);
  }
}

@keyframes hud-rotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes hud-counter-rotate {
  to {
    transform: rotate(-360deg);
  }
}

@keyframes signal-pulse {
  50% {
    opacity: 0.42;
  }
}

@keyframes data-breathe {
  to {
    transform: scaleY(0.56);
    transform-origin: bottom;
  }
}

/* PERTRADE liquid-glass unification: rounded frosted surfaces, no literal bubble objects. */
.hud-bubble-field {
  display: none !important;
}

.command-deck,
.hud-panel,
.access-terminal,
.lower-panel,
.panel,
.flash,
.hud-input,
.access-submit,
button,
.button {
  border-radius: 24px !important;
  clip-path: none !important;
}

.hud-panel,
.access-terminal,
.lower-panel,
.panel {
  background:
    linear-gradient(145deg, rgba(8, 34, 58, 0.54), rgba(2, 10, 22, 0.32)) !important;
  border-color: rgba(138, 247, 255, 0.34) !important;
  backdrop-filter: blur(12px) saturate(170%) !important;
  box-shadow:
    0 20px 52px rgba(0, 234, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset -18px -20px 36px rgba(31, 104, 255, 0.08) !important;
}

.hud-panel::after,
.access-terminal::after,
.panel::after {
  position: absolute;
  inset: 1px;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 22%, rgba(126, 246, 255, 0.1) 52%, transparent 76%, rgba(255, 255, 255, 0.1));
  content: "";
  opacity: 0.7;
}

.hud-input,
input,
textarea,
select {
  border-radius: 18px !important;
  clip-path: none !important;
  background:
    linear-gradient(90deg, rgba(159, 247, 255, 0.1), transparent 42%),
    rgba(4, 30, 49, 0.36) !important;
  backdrop-filter: blur(9px) saturate(160%);
}

button,
.button,
.access-submit {
  border-radius: 999px !important;
}