:root {
  --orbita-void: #010406;
  --orbita-deep: #031016;
  --orbita-fluid-cyan: hsl(var(--persona-hue, 190) 88% 66%);
  --orbita-fluid-blue: #4aa8ff;
  --orbita-fluid-gold: #f6c96b;
  --orbita-fluid-coral: #ff7f73;
  --orbita-fluid-mint: #8af2c8;
  --orbita-paper: rgba(240, 250, 252, .94);
  --orbita-muted: rgba(205, 224, 228, .6);
  --orbita-fluid-alpha: var(--persona-glass-alpha, .62);
  --orbita-flow-speed: calc(26s - var(--persona-motion, .6) * 9s);
  --orbita-fluid-blur: 36px;
}

html {
  background: var(--orbita-void);
}

body {
  color: var(--orbita-paper);
  background:
    radial-gradient(circle at 13% -8%, rgba(66, 196, 226, .13), transparent 34%),
    radial-gradient(circle at 92% 4%, rgba(246, 201, 107, .075), transparent 28%),
    linear-gradient(155deg, #010406 0%, #031015 46%, #010609 100%);
}

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  width: min(68vw, 980px);
  aspect-ratio: 1.3;
  border-radius: 50%;
  pointer-events: none;
  opacity: .44;
  filter: blur(105px) saturate(130%);
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

body::before {
  left: -24vw;
  top: 8vh;
  background:
    radial-gradient(circle at 38% 45%, hsla(var(--persona-hue, 190), 88%, 57%, .32), transparent 52%),
    radial-gradient(circle at 70% 28%, rgba(72, 111, 255, .2), transparent 40%);
  animation: orbita-fluid-drift-a var(--orbita-flow-speed) ease-in-out infinite alternate;
}

body::after {
  right: -28vw;
  bottom: -12vh;
  background:
    radial-gradient(circle at 34% 42%, rgba(246, 201, 107, .2), transparent 48%),
    radial-gradient(circle at 66% 58%, rgba(72, 216, 209, .2), transparent 52%);
  animation: orbita-fluid-drift-b calc(var(--orbita-flow-speed) * 1.18) ease-in-out infinite alternate;
}

::selection {
  color: #001316;
  background: var(--orbita-fluid-mint);
}

body.orbita-experience-v4 main,
body.orbita-experience-v4 .experience-main {
  position: relative;
  overflow: clip;
}

body.orbita-experience-v4 .glass,
body.orbita-experience-v4 [class*="-panel"],
body.orbita-experience-v4 [class*="-card"],
body.orbita-experience-v4 [class*="-shell"]:not(.platform-shell),
body.orbita-experience-v4 [class*="-stage"] {
  border-color: transparent !important;
}

body.orbita-experience-v4 .glass,
body.orbita-experience-v4 [class*="-panel"],
body.orbita-experience-v4 [class*="-shell"]:not(.platform-shell) {
  background:
    linear-gradient(142deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .017) 42%, rgba(75, 222, 227, .035)),
    rgba(2, 12, 17, calc(var(--orbita-fluid-alpha) * .78));
  box-shadow:
    0 34px 110px rgba(0, 0, 0, .32),
    inset 0 1px 0 rgba(255, 255, 255, .095),
    inset 0 -1px 0 rgba(90, 220, 225, .035);
  -webkit-backdrop-filter: blur(var(--orbita-fluid-blur)) saturate(145%);
  backdrop-filter: blur(var(--orbita-fluid-blur)) saturate(145%);
}

body.orbita-experience-v4 .platform-shell {
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.orbita-experience-v4 [class*="-card"] {
  background:
    radial-gradient(circle at 6% 4%, rgba(116, 233, 230, .08), transparent 36%),
    linear-gradient(140deg, rgba(255, 255, 255, .052), rgba(255, 255, 255, .012));
  box-shadow:
    0 26px 70px rgba(0, 0, 0, .16),
    inset 0 1px 0 rgba(255, 255, 255, .07);
  transition:
    transform 480ms cubic-bezier(.2, .8, .2, 1),
    background 480ms ease,
    box-shadow 480ms ease;
}

body.orbita-experience-v4 [class*="-card"]:hover {
  background:
    radial-gradient(circle at 22% 12%, rgba(116, 233, 230, .13), transparent 42%),
    linear-gradient(140deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .018));
  box-shadow:
    0 34px 90px rgba(0, 0, 0, .23),
    inset 0 1px 0 rgba(255, 255, 255, .11);
}

body.orbita-experience-v4 h1,
body.orbita-experience-v4 h2,
body.orbita-experience-v4 h3,
.orbita-identity-admin h1,
.orbita-identity-admin h2,
.orbita-identity-admin h3 {
  text-wrap: balance;
}

body.orbita-experience-v4 h1,
body.orbita-experience-v4 h2 {
  color: rgba(248, 253, 253, .98);
  font-family: "Avenir Next", "Noto Sans SC", sans-serif;
  font-weight: 520;
  letter-spacing: -.052em;
}

body.orbita-experience-v4 p {
  text-wrap: pretty;
}

body.orbita-experience-v4 button,
.orbita-identity-admin button,
.eu-button {
  border-color: transparent !important;
  transition:
    transform 220ms cubic-bezier(.2, .8, .2, 1),
    background 220ms ease,
    color 220ms ease,
    box-shadow 220ms ease;
}

body.orbita-experience-v4 button:hover,
.orbita-identity-admin button:hover,
.eu-button:hover {
  transform: translateY(-1px);
}

.eu-button.eu-button-primary,
.eu-button-primary {
  color: #001713 !important;
  background: linear-gradient(135deg, #c9ffe9, #83e9bd) !important;
  box-shadow: 0 12px 30px rgba(97, 226, 173, .2) !important;
}

.orbita-natural-conversation,
.agent-panel.orbita-natural-conversation {
  border: 0 !important;
  border-radius: 32px;
  background:
    radial-gradient(circle at 16% 0%, hsla(var(--persona-hue, 190), 88%, 62%, .105), transparent 40%),
    linear-gradient(145deg, rgba(13, 30, 38, .64), rgba(1, 8, 12, .77)) !important;
  box-shadow:
    0 42px 130px rgba(0, 0, 0, .42),
    inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}

.orbita-live-stage {
  border: 0 !important;
  background:
    radial-gradient(circle at 18% 0%, hsla(var(--persona-hue, 190), 94%, 64%, .13), transparent 42%),
    linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .014)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}

.orbita-natural-conversation #agentForm,
.orbita-vibe-composer,
.orbita-vibe-composer textarea {
  border: 0 !important;
}

.orbita-natural-conversation #agentForm {
  background: rgba(230, 249, 248, .065) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    0 18px 48px rgba(0, 0, 0, .12);
}

.orbita-vibe-composer {
  background:
    radial-gradient(circle at 16% 0%, rgba(73, 223, 224, .13), transparent 38%),
    rgba(1, 9, 13, .9) !important;
}

.orbita-identity-launcher {
  border: 0 !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .035)),
    rgba(4, 18, 24, .72) !important;
  box-shadow:
    0 22px 60px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(255, 255, 255, .14) !important;
}

.orbita-identity-admin[hidden] {
  display: none !important;
}

.orbita-identity-admin:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(210px, 16vw) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  inset: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 7% 4%, rgba(72, 209, 218, .16), transparent 29%),
    radial-gradient(circle at 94% 8%, rgba(246, 201, 107, .08), transparent 26%),
    linear-gradient(145deg, rgba(3, 15, 21, .96), rgba(0, 5, 8, .985)) !important;
  box-shadow: none !important;
}

.identity-admin-head {
  grid-column: 1 / -1;
  border: 0 !important;
  padding: clamp(22px, 3vw, 42px) clamp(20px, 4vw, 64px) 22px !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, .045), transparent 72%);
}

.identity-admin-tabs {
  grid-column: 1;
  grid-row: 2;
  align-items: stretch;
  flex-direction: column;
  gap: 4px !important;
  padding: 22px 16px !important;
  border: 0 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), transparent);
}

.identity-admin-tabs button {
  justify-content: flex-start;
  min-height: 48px !important;
  padding-inline: 17px !important;
  border: 0 !important;
  border-radius: 14px !important;
  text-align: left;
}

.identity-admin-tabs button.is-active {
  color: #ecfafa !important;
  background:
    linear-gradient(110deg, rgba(111, 227, 228, .16), rgba(111, 227, 228, .025)) !important;
  box-shadow: inset 2px 0 0 #76e1e3;
}

.identity-admin-content {
  grid-column: 2;
  grid-row: 2;
  box-sizing: border-box;
  width: 100%;
  height: 100% !important;
  padding: clamp(22px, 4vw, 58px) !important;
}

.identity-metric-grid article,
.identity-flow,
.identity-table-wrap,
.identity-client-form,
.identity-client,
.identity-settings-form,
.identity-persona-preview,
.identity-json-editor {
  border: 0 !important;
  background:
    linear-gradient(142deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .013)) !important;
  box-shadow:
    0 24px 74px rgba(0, 0, 0, .14),
    inset 0 1px 0 rgba(255, 255, 255, .075);
}

.identity-table-wrap {
  background: rgba(255, 255, 255, .025) !important;
}

.identity-table-wrap th,
.identity-table-wrap td {
  border-color: rgba(194, 230, 232, .055) !important;
}

.identity-client-form input,
.identity-client-form textarea,
.identity-setting input,
.identity-json-editor textarea,
.orbita-identity-admin input,
.orbita-identity-admin textarea,
.orbita-identity-admin select {
  border: 0 !important;
  background: rgba(226, 246, 246, .06) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .055),
    inset 0 0 0 1px rgba(255, 255, 255, .018);
}

.identity-client-form input:focus,
.identity-client-form textarea:focus,
.identity-setting input:focus,
.identity-json-editor textarea:focus,
.orbita-identity-admin input:focus,
.orbita-identity-admin textarea:focus,
.orbita-identity-admin select:focus {
  outline: none;
  background: rgba(226, 246, 246, .09) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 0 0 3px rgba(116, 226, 228, .11);
}

.studio-shell,
.intelligence-shell,
.admin-shell,
.runtime-config-shell,
.runtime-config-panel,
.intelligence-panel,
.studio-panel {
  border-color: transparent !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .052), rgba(255, 255, 255, .012)),
    rgba(2, 12, 17, .56) !important;
  box-shadow:
    0 28px 90px rgba(0, 0, 0, .2),
    inset 0 1px 0 rgba(255, 255, 255, .07) !important;
  -webkit-backdrop-filter: blur(30px) saturate(135%);
  backdrop-filter: blur(30px) saturate(135%);
}

@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  body.orbita-experience-v4 .glass,
  body.orbita-experience-v4 [class*="-panel"],
  body.orbita-experience-v4 [class*="-shell"]:not(.platform-shell),
  .orbita-identity-launcher,
  .studio-shell,
  .intelligence-shell,
  .admin-shell,
  .runtime-config-shell,
  .runtime-config-panel,
  .intelligence-panel,
  .studio-panel {
    background-color: #06141b !important;
  }
}

@keyframes orbita-fluid-drift-a {
  0% { transform: translate3d(-3vw, -4vh, 0) rotate(-7deg) scale(.92); }
  55% { transform: translate3d(15vw, 10vh, 0) rotate(12deg) scale(1.08); }
  100% { transform: translate3d(7vw, 34vh, 0) rotate(-3deg) scale(.98); }
}

@keyframes orbita-fluid-drift-b {
  0% { transform: translate3d(4vw, 7vh, 0) rotate(4deg) scale(.94); }
  52% { transform: translate3d(-16vw, -8vh, 0) rotate(-10deg) scale(1.09); }
  100% { transform: translate3d(-7vw, -32vh, 0) rotate(8deg) scale(1); }
}

@media (max-width: 860px) {
  :root {
    --orbita-fluid-blur: 25px;
  }

  body::before,
  body::after {
    width: 120vw;
    opacity: .34;
    filter: blur(82px);
  }

  .orbita-identity-admin {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  .identity-admin-head {
    grid-column: 1;
    grid-row: 1;
    padding: 18px 16px 14px !important;
  }

  .identity-admin-tabs {
    grid-column: 1;
    grid-row: 2;
    flex-direction: row;
    padding: 8px 12px 12px !important;
    overflow-x: auto;
    background: transparent;
    scrollbar-width: none;
  }

  .identity-admin-tabs::-webkit-scrollbar {
    display: none;
  }

  .identity-admin-tabs button {
    min-height: 40px !important;
    white-space: nowrap;
  }

  .identity-admin-tabs button.is-active {
    box-shadow: inset 0 -2px 0 #76e1e3;
  }

  .identity-admin-content {
    grid-column: 1;
    grid-row: 3;
    padding: 18px 14px 36px !important;
  }

  .orbita-natural-conversation,
  .agent-panel.orbita-natural-conversation {
    border-radius: 28px 28px 0 0;
  }
}

@media (max-width: 560px) {
  body.orbita-experience-v4 [class*="-card"] {
    border-radius: 20px;
  }

  .identity-admin-head h2 {
    font-size: 24px !important;
  }

  .identity-metric-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none;
  }
}

.space-admin-form {
  display: grid;
  gap: 14px;
}

.space-admin-form > section {
  display: grid;
  gap: 17px;
  padding: clamp(18px, 2.4vw, 28px);
  border: 0;
  border-radius: 24px;
  background:
    radial-gradient(circle at 0 0, rgba(106, 222, 226, .07), transparent 34%),
    linear-gradient(142deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .012));
  box-shadow:
    0 25px 75px rgba(0, 0, 0, .15),
    inset 0 1px 0 rgba(255, 255, 255, .075);
}

.space-admin-form > section > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.space-admin-form > section > header > div {
  display: grid;
  gap: 5px;
}

.space-admin-form > section > header span {
  color: rgba(113, 224, 227, .72);
  font: 700 9px/1.2 "Avenir Next Condensed", "DIN Condensed", sans-serif;
  letter-spacing: .19em;
}

.space-admin-form > section > header strong {
  color: rgba(240, 250, 251, .94);
  font-size: 17px;
}

.space-admin-form > section > header p {
  max-width: 500px;
  margin: 0;
  color: rgba(198, 221, 224, .44);
  font-size: 10px;
  line-height: 1.6;
  text-align: right;
}

.space-toggle-grid,
.space-color-grid,
.space-field-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.space-toggle,
.space-color,
.space-switch {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 14px;
  color: rgba(209, 229, 231, .58);
  background: rgba(230, 247, 247, .045);
  cursor: pointer;
}

.space-toggle > input:first-child,
.space-color > input[type="checkbox"],
.space-switch > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.space-toggle > span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
}

.space-toggle i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(189, 216, 219, .22);
}

.space-toggle:has(input:checked),
.space-color:has(input[type="checkbox"]:checked),
.space-switch:has(input:checked) {
  color: rgba(237, 248, 249, .92);
  background: rgba(114, 225, 227, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}

.space-toggle:has(input:checked) i {
  background: #7ce6dc;
  box-shadow: 0 0 11px #7ce6dc;
}

.space-color input[type="color"] {
  width: 24px;
  height: 24px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.space-color input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.space-color input[type="color"]::-webkit-color-swatch {
  border: 0;
  border-radius: 50%;
}

.space-color span {
  font-size: 10px;
}

.space-field-grid label {
  display: grid;
  gap: 7px;
}

.space-field-grid label > span {
  color: rgba(200, 222, 225, .45);
  font-size: 9px;
}

.space-field-grid input,
.space-field-grid select {
  box-sizing: border-box;
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: 13px;
  outline: none;
  color: rgba(238, 249, 250, .9);
  background: rgba(230, 247, 247, .055);
  font: 500 11px/1 "Avenir Next", "Noto Sans SC", sans-serif;
}

.space-switch {
  align-self: end;
}

.space-switch::before {
  content: "";
  width: 30px;
  height: 17px;
  border-radius: 999px;
  background: rgba(205, 229, 231, .12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}

.space-switch::after {
  content: "";
  position: absolute;
  left: 15px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(217, 235, 237, .52);
  transition: transform 180ms ease, background 180ms ease;
}

.space-switch:has(input:checked)::before {
  background: rgba(112, 229, 194, .28);
}

.space-switch:has(input:checked)::after {
  background: #94edcf;
  transform: translateX(13px);
  box-shadow: 0 0 9px rgba(116, 232, 197, .48);
}

@supports not selector(:has(*)) {
  .space-toggle,
  .space-color,
  .space-switch {
    background: rgba(230, 247, 247, .065);
  }

  .space-toggle > input:first-child,
  .space-color > input[type="checkbox"],
  .space-switch > input {
    position: static;
    opacity: 1;
    pointer-events: auto;
  }
}

@media (max-width: 1040px) {
  .space-toggle-grid,
  .space-color-grid,
  .space-field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .space-admin-form > section > header {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .space-admin-form > section > header p {
    text-align: left;
  }

  .space-toggle-grid,
  .space-color-grid,
  .space-field-grid {
    grid-template-columns: 1fr;
  }
}