:root,
:root[data-ui-theme='cyber'] {
  --bg-dark: #07111f;
  --cyber-slate: #102b43;
  --cyber-slate-raised: #183b5b;
  --cyber-grid: rgba(55, 176, 208, 0.13);
  --cyber-telemetry-fill: rgba(7, 17, 31, 0.96);
  --cyber-panel-surface: rgba(7, 19, 34, 0.94);
  --glass-bg: var(--cyber-panel-surface);
  --glass-border: rgba(78, 183, 221, 0.34);
  --glass-border-hover: rgba(32, 213, 255, 0.88);
  --accent: #20d5ff;
  --accent-dim: rgba(32, 213, 255, 0.17);
  --accent-glow: rgba(32, 213, 255, 0.42);
  --text-primary: #eef8ff;
  --text-secondary: rgba(218, 238, 249, 0.84);
  --text-dim: rgba(168, 198, 216, 0.72);
  --cyber-red: #ff477e;
  --cyber-red-bright: #ff7198;
  --cyber-panel-shadow:
    3px 0 0 rgba(32, 213, 255, 0.22) inset,
    -1px 0 0 rgba(226, 244, 250, 0.06) inset,
    0 10px 28px rgba(0, 0, 0, 0.48);
  --market-positive: #b6ff3b;
  --market-risk: #ff477e;
  --market-caution: #ffc95c;
  --market-intel: #f3c96a;
  --menu-bg: #071529;
  --panel-radius: 6px;
  --btn-radius: 5px;
}

#intel-hud {
  --hud-color: rgba(192, 239, 255, 0.9);
  --hud-glow: rgba(32, 213, 255, 0.24);
  --hud-border: rgba(32, 213, 255, 0.3);
}

.data-toggle-btn.active,
.pp-toggle-btn.active {
  color: var(--market-positive);
  border-color: rgba(182, 255, 59, 0.72);
  background: rgba(182, 255, 59, 0.13);
  box-shadow: 0 0 12px rgba(182, 255, 59, 0.18);
}

.data-toggle-btn.active.feed-stale,
.data-toggle-btn.active.feed-partial,
.data-toggle-btn.active.feed-fallback {
  color: var(--market-caution);
  border-color: rgba(255, 201, 92, 0.78);
  background: rgba(255, 201, 92, 0.12);
  box-shadow: 0 0 12px rgba(255, 201, 92, 0.16);
}

.data-toggle-btn.active.feed-degraded,
.data-toggle-btn.active.feed-unavailable {
  color: var(--market-risk);
  border-color: rgba(255, 71, 126, 0.78);
  background: rgba(255, 71, 126, 0.12);
  box-shadow: 0 0 12px rgba(255, 71, 126, 0.16);
}

.data-toggle-btn.active.feed-stale:hover,
.data-toggle-btn.active.feed-partial:hover,
.data-toggle-btn.active.feed-fallback:hover,
.data-toggle-btn.active.feed-degraded:hover,
.data-toggle-btn.active.feed-unavailable:hover {
  filter: brightness(1.12);
}

#terrantir-menu {
  border-bottom-color: rgba(32, 213, 255, 0.56);
  background: linear-gradient(
    100deg,
    rgba(4, 12, 27, 0.98),
    rgba(8, 24, 48, 0.98) 52%,
    rgba(18, 12, 38, 0.98)
  );
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.46),
    0 1px 16px rgba(32, 213, 255, 0.13);
}

#terrantir-menu::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    #20d5ff 28%,
    #b6ff3b 55%,
    #ff477e 76%,
    transparent
  );
  background-size: 200% 100%;
  animation: terrantir-signal-sweep 6s linear infinite;
  content: '';
  pointer-events: none;
}

#terrantir-menu button,
#terrantir-menu .terrantir-menu__admin {
  color: rgba(218, 238, 249, 0.88);
  transition:
    color 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

#terrantir-menu button:hover,
#terrantir-menu button:focus-visible,
#terrantir-menu .terrantir-menu__admin:is(:hover, :focus-visible),
#terrantir-menu button[aria-pressed='true'] {
  border-color: rgba(32, 213, 255, 0.58);
  background: linear-gradient(
    115deg,
    rgba(32, 213, 255, 0.2),
    rgba(182, 255, 59, 0.1)
  );
  color: #f2fbff;
  box-shadow: 0 0 16px rgba(32, 213, 255, 0.18);
}

#terrantir-menu button[aria-pressed='true'] {
  color: #c7ff64;
}

#title-bar {
  border: 1px solid rgba(32, 213, 255, 0.42);
  border-left: 3px solid #b6ff3b;
  background: linear-gradient(
    105deg,
    rgba(5, 15, 32, 0.97),
    rgba(7, 24, 43, 0.9) 72%,
    rgba(18, 13, 39, 0.86)
  );
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.42),
    0 0 22px rgba(32, 213, 255, 0.13),
    inset 0 1px rgba(201, 245, 255, 0.1);
}

#title-bar h1 {
  color: #f1fbff;
  text-shadow: 0 0 16px rgba(32, 213, 255, 0.24);
}

#title-bar .title-accent {
  color: #b6ff3b;
}

#title-bar .subtitle {
  color: rgba(146, 218, 238, 0.88);
}

#title-bar .title-logo {
  filter: drop-shadow(0 0 10px rgba(32, 213, 255, 0.54));
}

#top-center-actions {
  border-color: rgba(32, 213, 255, 0.42);
  background: rgba(5, 15, 32, 0.94);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.38),
    0 0 18px rgba(32, 213, 255, 0.1);
}

#top-center-actions button {
  color: #dff7ff;
}

#top-center-actions button:is(:hover, :focus-visible),
#top-center-actions button[aria-pressed='true'] {
  border-color: rgba(32, 213, 255, 0.65);
  background: rgba(32, 213, 255, 0.17);
  color: #b6ff3b;
  box-shadow: 0 0 14px rgba(32, 213, 255, 0.2);
}

#command-dock {
  border-color: rgba(32, 213, 255, 0.46);
  background: linear-gradient(
    115deg,
    rgba(5, 14, 29, 0.97),
    rgba(7, 23, 42, 0.96) 56%,
    rgba(17, 12, 36, 0.96)
  );
  box-shadow:
    0 16px 44px rgba(0, 0, 0, 0.62),
    0 0 24px rgba(32, 213, 255, 0.12),
    0 0 0 1px rgba(182, 255, 59, 0.07) inset;
}

#command-dock > #gev-voice-control {
  border-color: rgba(32, 213, 255, 0.58);
  background: linear-gradient(
    145deg,
    rgba(7, 31, 52, 0.98),
    rgba(18, 15, 43, 0.98)
  );
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.58),
    0 0 24px rgba(32, 213, 255, 0.2),
    0 0 0 1px rgba(32, 213, 255, 0.16) inset;
}

#left-panel-stack
  > #data-panel:not(.collapsed)
  .data-panel-inner,
#left-panel-stack
  > #cctv-panel:not(.collapsed)
  .cctv-panel-inner,
#left-panel-stack
  > #scene-panel:not(.collapsed)
  .scene-panel-inner,
#right-context-rail
  > [data-panel-id]:not(.collapsed)
  :is(
    .global-context-panel-inner,
    .weather-panel-inner,
    .recent-imagery-panel-inner,
    .radio-panel-inner
  ) {
  border-color: rgba(54, 178, 222, 0.76);
  background-color: rgba(4, 13, 28, 0.98);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.68),
    0 0 24px rgba(32, 213, 255, 0.2),
    0 1px 0 rgba(197, 240, 255, 0.16) inset;
}

#left-panel-stack > #data-panel .data-toggle-btn.active:not([class*='feed-']),
#right-context-rail .data-toggle-btn.active:not([class*='feed-']),
#left-panel-stack .data-toggle-btn.active:not([class*='feed-']),
#right-context-rail .data-toggle-btn.active:not([class*='feed-']) {
  border-color: rgba(182, 255, 59, 0.92);
  background: linear-gradient(
    105deg,
    rgba(182, 255, 59, 0.22),
    rgba(32, 213, 255, 0.1)
  );
  color: #c7ff64;
  box-shadow:
    0 0 18px rgba(182, 255, 59, 0.2),
    inset 3px 0 #b6ff3b;
}

#left-panel-stack .data-toggle-btn:not(.active):hover,
#right-context-rail .data-toggle-btn:not(.active):hover,
#right-context-rail .pp-toggle-btn:not(.active):hover {
  border-color: rgba(32, 213, 255, 0.72);
  background: rgba(32, 213, 255, 0.12);
  color: #effbff;
}

#intel-hud .hud-corner {
  border-color: rgba(32, 213, 255, 0.7);
  background:
    linear-gradient(110deg, rgba(5, 18, 37, 0.94), rgba(8, 16, 35, 0.78));
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.46),
    0 0 20px rgba(32, 213, 255, 0.15),
    inset 0 1px rgba(32, 213, 255, 0.16);
}

#intel-hud .hud-bracket {
  color: #b6ff3b;
  filter: drop-shadow(0 0 5px rgba(182, 255, 59, 0.46));
}

:is(
    .data-panel-inner,
    .cctv-panel-inner,
    .scene-panel-inner,
    .weather-panel-inner,
    .recent-imagery-panel-inner,
    .street-level-panel-inner,
    .global-context-panel-inner,
    .radio-panel-inner
  ) {
  border-color: rgba(54, 178, 222, 0.48);
  background-color: rgba(5, 15, 30, 0.96);
  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.58),
    0 0 20px rgba(32, 213, 255, 0.1),
    0 1px 0 rgba(197, 240, 255, 0.1) inset;
}

:is([data-panel-surface], [data-panel-popup])::before {
  border-color: rgba(54, 178, 222, 0.5);
  background-color: rgba(5, 15, 30, 0.97);
  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.58),
    0 0 22px rgba(32, 213, 255, 0.12),
    0 1px 0 rgba(197, 240, 255, 0.1) inset;
}

:is(.panel-header, [data-panel-header], .pp-header-row) {
  border-color: rgba(54, 178, 222, 0.36);
}

:is(.panel-title, .pp-header-label, .panel-surface-title) {
  color: #75e5ff;
  text-shadow: 0 0 12px rgba(32, 213, 255, 0.2);
}

:is(.panel-collapse-btn, .scene-btn, .data-toggle-btn, .pp-toggle-btn, .style-btn) {
  transition:
    color 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

:is(.scene-btn, .data-toggle-btn, .pp-toggle-btn, .style-btn):hover:not(:disabled) {
  border-color: rgba(32, 213, 255, 0.66);
  background-color: rgba(32, 213, 255, 0.12);
  color: #effbff;
  box-shadow: 0 0 14px rgba(32, 213, 255, 0.14);
}

.panel-collapse-btn:hover:not(:disabled) {
  border-color: rgba(182, 255, 59, 0.72);
  background-color: rgba(182, 255, 59, 0.12);
  color: #c7ff64;
  box-shadow: 0 0 14px rgba(182, 255, 59, 0.16);
}

@keyframes terrantir-signal-sweep {
  to {
    background-position: -200% 0;
  }
}

@keyframes terrantir-panel-deploy {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.986);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes terrantir-content-lock {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

:is(
  #data-panel,
  #cctv-panel,
  #street-level-panel,
  #scene-panel,
  #weather-panel,
  #recent-imagery-panel,
  #global-context-panel
):not(.collapsed)
  :is(
    .data-panel-inner,
    .cctv-panel-inner,
    .street-level-panel-inner,
    .scene-panel-inner,
    .weather-panel-inner,
    .recent-imagery-panel-inner,
    .global-context-panel-inner
  ) {
  animation: terrantir-panel-deploy 320ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

#radio-panel:not(.collapsed) .radio-panel-inner {
  animation: terrantir-panel-deploy 320ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

#pp-toggles:not(.collapsed) > .pp-panel-body {
  animation: terrantir-content-lock 240ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.panel-collapse-btn,
.scene-btn,
.data-toggle-btn,
.pp-toggle-btn,
.location-pill {
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    color var(--transition-fast),
    opacity var(--transition-fast),
    transform 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.data-toggle-btn {
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    color var(--transition-fast),
    min-width var(--transition-fast),
    letter-spacing var(--transition-fast),
    transform 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pp-toggle-btn {
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    color var(--transition-fast),
    border-radius var(--transition-fast),
    transform 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .panel-collapse-btn:hover:not(:disabled),
  .scene-btn:hover:not(:disabled),
  .data-toggle-btn:hover:not(:disabled),
  .pp-toggle-btn:hover:not(:disabled),
  .location-pill:hover:not(:disabled) {
    transform: translateY(-1px) scale(1.015);
  }
}

.panel-collapse-btn:active:not(:disabled),
.scene-btn:active:not(:disabled),
.data-toggle-btn:active:not(:disabled),
.pp-toggle-btn:active:not(:disabled),
.location-pill:active:not(:disabled) {
  transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  :is(
    #data-panel,
    #cctv-panel,
    #street-level-panel,
    #scene-panel,
    #weather-panel,
    #recent-imagery-panel,
    #global-context-panel
  ):not(.collapsed)
    :is(
      .data-panel-inner,
      .cctv-panel-inner,
      .street-level-panel-inner,
      .scene-panel-inner,
      .weather-panel-inner,
      .recent-imagery-panel-inner,
      .global-context-panel-inner
    ),
  #radio-panel:not(.collapsed) .radio-panel-inner,
  #pp-toggles:not(.collapsed) > .pp-panel-body {
    animation: none;
  }

  .panel-collapse-btn,
  .scene-btn,
  .data-toggle-btn,
  .pp-toggle-btn,
  .location-pill {
    transition-duration: 0.01ms;
  }

  .panel-collapse-btn:active:not(:disabled),
  .scene-btn:active:not(:disabled),
  .data-toggle-btn:active:not(:disabled),
  .pp-toggle-btn:active:not(:disabled),
  .location-pill:active:not(:disabled) {
    transform: none;
  }

  #terrantir-menu::after {
    animation: none;
  }
}