/*
 * PixiCore AI Studio - Vibrant Pro 2026
 * Consolidated visual layer. Keeps all functional IDs and backend contracts intact.
 * Performance goals: no scroll reveal, reduced blur/filter cost, GPU-only orbital transforms.
 */

:root {
  --aio-nav-h: 76px;
  --aio-bg-0: #030714;
  --aio-bg-1: #07142b;
  --aio-bg-2: #0b1e3b;
  --aio-surface: #0b1a35;
  --aio-surface-2: #102445;
  --aio-surface-3: #132b50;
  --aio-stroke: rgba(126, 177, 255, 0.18);
  --aio-stroke-strong: rgba(120, 204, 255, 0.34);
  --aio-text: #f3f8ff;
  --aio-text-soft: #b6c8e2;
  --aio-text-dim: #8ca5c6;
  --aio-blue: #4d7dff;
  --aio-cyan: #43d8ff;
  --aio-violet: #9b68ff;
  --aio-gold: #ffbc4f;
  --aio-coral: #ff6fae;
  --aio-mint: #52e1c1;
  --aio-red: #ff6b72;
  --aio-shadow: 0 26px 70px rgba(0, 5, 18, 0.42);
  --aio-shadow-soft: 0 15px 38px rgba(0, 7, 22, 0.28);
  --aio-radius-xl: 30px;
  --aio-radius-lg: 22px;
  --aio-radius-md: 16px;
}

html {
  background: var(--aio-bg-0);
  color-scheme: dark;
  scroll-behavior: smooth;
}

body.ai-studio-page.ai-studio-orbital-page {
  min-width: 320px;
  overflow-x: clip;
  background:
    radial-gradient(circle at 82% 6%, rgba(80, 91, 255, 0.17), transparent 28rem),
    radial-gradient(circle at 14% 32%, rgba(42, 198, 255, 0.10), transparent 24rem),
    radial-gradient(circle at 72% 72%, rgba(255, 111, 174, 0.06), transparent 24rem),
    linear-gradient(180deg, var(--aio-bg-0) 0%, #061127 46%, #040b19 100%);
  color: var(--aio-text);
}

.ai-studio-orbital-page *,
.ai-studio-orbital-page *::before,
.ai-studio-orbital-page *::after {
  box-sizing: border-box;
}

.ai-studio-orbital-page img,
.ai-studio-orbital-page svg,
.ai-studio-orbital-page video,
.ai-studio-orbital-page canvas {
  filter: none !important;
  mix-blend-mode: normal !important;
}

body.ai-studio-orbital-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.3;
  background-image:
    linear-gradient(rgba(117, 167, 255, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(117, 167, 255, 0.032) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 84%);
}

/* Navigation */
.ai-studio-orbital-page .navbar {
  min-height: var(--aio-nav-h);
  border: 0;
  border-bottom: 1px solid rgba(126, 176, 255, 0.12);
  background: rgba(3, 10, 24, 0.94) !important;
  box-shadow: 0 10px 34px rgba(0, 7, 21, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ai-studio-orbital-page .navbar::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--aio-blue), var(--aio-cyan), var(--aio-violet), transparent);
  opacity: .72;
}

.ai-studio-orbital-page .navbar .container-lg {
  max-width: 1500px;
}

.ai-studio-orbital-page .navbar-brand,
.ai-studio-orbital-page .navbar .nav-link {
  color: rgba(240, 248, 255, 0.9) !important;
}

.ai-studio-orbital-page .navbar-brand {
  display: inline-flex;
  gap: .72rem;
  align-items: center;
  font-weight: 780;
}

.ai-studio-orbital-page .navbar-brand .nav-logo {
  width: 40px;
  height: 40px;
  padding: 5px;
  border-radius: 14px;
  border: 1px solid rgba(77, 216, 255, .22);
  background: linear-gradient(145deg, rgba(77,125,255,.13), rgba(82,225,193,.07));
  box-shadow: 0 8px 24px rgba(51, 159, 255, .13);
}

.ai-studio-orbital-page .navbar .nav-link {
  position: relative;
  margin-inline: .08rem;
  padding: .68rem .82rem !important;
  border-radius: 13px;
  font-size: .92rem;
  font-weight: 680;
  transition: background-color .18s ease, transform .18s ease, color .18s ease;
}

.ai-studio-orbital-page .navbar .nav-link:hover,
.ai-studio-orbital-page .navbar .nav-link:focus-visible {
  color: #fff !important;
  background: rgba(76, 125, 255, .12);
  transform: translateY(-1px);
}

.ai-studio-orbital-page .navbar .nav-link.active {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(77,125,255,.22), rgba(155,104,255,.16));
  box-shadow: inset 0 0 0 1px rgba(104, 176, 255, .24);
}

.ai-studio-orbital-page .navbar .nav-link.active::after {
  content: "";
  position: absolute;
  left: 24%;
  right: 24%;
  bottom: 4px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--aio-cyan), var(--aio-violet));
  box-shadow: 0 0 12px rgba(67, 216, 255, .7);
}

.ai-studio-orbital-page .navbar .form-select {
  min-width: 118px;
  border-radius: 12px;
  border-color: rgba(126, 176, 255, .22);
  background-color: #0b1d39;
  color: var(--aio-text);
  box-shadow: none;
}

.ai-studio-orbital-page .navbar-toggler {
  border-color: rgba(100, 177, 255, .28);
  background: #102847;
}

.ai-studio-orbital-page .navbar-toggler-icon {
  filter: invert(1) brightness(1.8) !important;
}

/* Hero */
.ai-studio-orbital-page .ai-hero.ai-orbital-hero {
  position: relative;
  min-height: clamp(690px, calc(100svh - var(--aio-nav-h)), 840px);
  margin-top: var(--aio-nav-h);
  padding: clamp(3.8rem, 6vw, 6.2rem) 1.25rem clamp(3.5rem, 5.5vw, 5.4rem);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 68% 44%, rgba(65, 135, 255, .15), transparent 24rem),
    radial-gradient(circle at 72% 54%, rgba(155, 104, 255, .12), transparent 22rem),
    linear-gradient(180deg, rgba(3, 9, 22, .94), rgba(5, 17, 38, .88));
}

.ai-orbital-canvas {
  position: absolute;
  inset: 0;
  z-index: -5;
  width: 100%;
  height: 100%;
  opacity: .82;
  pointer-events: none;
}

.ai-orbital-nebula,
.ai-orbital-gridfield,
.ai-orbital-vignette {
  position: absolute;
  pointer-events: none;
}

.ai-orbital-nebula {
  z-index: -4;
  inset: 7% -8% -7% 32%;
  background:
    radial-gradient(ellipse at 54% 50%, rgba(65, 126, 255, .20), transparent 30%),
    radial-gradient(ellipse at 58% 52%, rgba(155, 104, 255, .13), transparent 50%),
    radial-gradient(ellipse at 62% 55%, rgba(67, 216, 255, .08), transparent 62%);
  transform: rotate(-7deg);
}

.ai-orbital-gridfield {
  z-index: -3;
  inset: 48% -10% -22% 24%;
  opacity: .26;
  transform: perspective(700px) rotateX(68deg);
  background-image:
    linear-gradient(rgba(109, 173, 255, .11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109, 173, 255, .11) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse, #000 28%, transparent 70%);
}

.ai-orbital-vignette {
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 7, 18, .84) 0%, rgba(2, 7, 18, .42) 42%, transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.08), transparent 30%, rgba(0,0,0,.25));
}

.ai-studio-orbital-page .ai-hero-inner {
  position: relative;
  z-index: 2;
  width: min(1500px, calc(100% - 24px));
  margin: 0 auto;
  padding: 0;
}

.ai-studio-orbital-page .ai-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(560px, 1.14fr);
  gap: clamp(2.6rem, 4vw, 5rem);
  align-items: center;
}

.ai-hero-copy-column {
  position: relative;
  z-index: 4;
  max-width: 680px;
}

.ai-hero-copy-column::before {
  content: "";
  position: absolute;
  inset: -2.4rem -4rem -2.4rem -3rem;
  z-index: -1;
  border-radius: 38px;
  pointer-events: none;
  background: radial-gradient(circle at 28% 48%, rgba(6, 17, 38, .96), rgba(6, 17, 38, .64) 52%, transparent 82%);
}

.ai-studio-orbital-page .ai-kicker {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: #78d9ff;
  font-size: .8rem;
  font-weight: 850;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.ai-studio-orbital-page .ai-kicker i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--aio-gold), var(--aio-coral));
  box-shadow: 0 0 16px rgba(255, 153, 111, .7);
}

.ai-studio-orbital-page .ai-hero h1 {
  max-width: 10.5ch;
  margin: 1.2rem 0 1.35rem;
  color: #fff;
  font-size: clamp(3.6rem, 5.2vw, 6.25rem);
  line-height: .96;
  letter-spacing: -.04em;
  text-wrap: balance;
  background: linear-gradient(112deg, #ffffff 0%, #d8ecff 38%, #73c7ff 68%, #c08cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 16px 46px rgba(0, 7, 24, .5);
}

.ai-studio-orbital-page .ai-hero-copy {
  width: min(610px, 100%);
  margin: 0;
  color: #c4d5eb !important;
  font-size: clamp(1rem, 1.2vw, 1.17rem);
  line-height: 1.72;
}

.ai-studio-orbital-page .ai-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 2rem;
}

.ai-studio-orbital-page .ai-hero-actions .btn,
.ai-studio-orbital-page .ai-run-button {
  position: relative;
  min-height: 52px;
  padding-inline: 1.35rem;
  border-radius: 16px;
  overflow: hidden;
  font-weight: 800;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ai-studio-orbital-page .ai-hero-actions .btn-primary,
.ai-studio-orbital-page .ai-run-button {
  border: 1px solid rgba(137, 192, 255, .3);
  color: #fff;
  background: linear-gradient(118deg, var(--aio-blue), #5471ff 42%, var(--aio-violet));
  box-shadow: 0 15px 36px rgba(77, 125, 255, .27), inset 0 1px rgba(255,255,255,.25);
}

.ai-studio-orbital-page .ai-hero-actions .btn-primary::after,
.ai-studio-orbital-page .ai-run-button::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -36%;
  width: 30%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transition: left .42s ease;
}

.ai-studio-orbital-page .ai-hero-actions .btn-primary:hover::after,
.ai-studio-orbital-page .ai-run-button:hover::after {
  left: 112%;
}

.ai-studio-orbital-page .ai-hero-actions .btn-outline-light,
.ai-studio-orbital-page .btn-outline-secondary,
.ai-studio-orbital-page .btn-outline-primary {
  border-color: rgba(140, 192, 255, .25);
  color: #eaf4ff;
  background: #102442;
}

.ai-studio-orbital-page .ai-hero-actions .btn:hover,
.ai-studio-orbital-page .ai-run-button:hover,
.ai-studio-orbital-page .btn-outline-secondary:hover,
.ai-studio-orbital-page .btn-outline-primary:hover {
  transform: translateY(-2px);
  border-color: rgba(152, 205, 255, .4);
  box-shadow: 0 17px 38px rgba(13, 45, 100, .25);
}

.ai-studio-orbital-page .ai-hero-status {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .7rem;
  margin-top: 2rem;
}

.ai-studio-orbital-page .ai-status-tile {
  min-width: 0;
  padding: .86rem .9rem;
  border-radius: 15px;
  border: 1px solid rgba(126, 176, 255, .16);
  background: #102541;
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}

.ai-status-tile:nth-child(1) { border-top-color: var(--aio-cyan); }
.ai-status-tile:nth-child(2) { border-top-color: var(--aio-violet); }
.ai-status-tile:nth-child(3) { border-top-color: var(--aio-gold); }
.ai-status-tile:nth-child(4) { border-top-color: var(--aio-coral); }

.ai-studio-orbital-page .ai-status-tile strong {
  display: block;
  overflow: hidden;
  color: #f7fbff;
  font-size: .84rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ai-studio-orbital-page .ai-status-tile span {
  display: block;
  margin-top: .2rem;
  color: #95afcf;
  font-size: .72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Orbital visual */
.ai-studio-orbital-page .ai-hero-visual {
  position: relative;
  min-width: 0;
  min-height: 570px;
}

.ai-orbital-stage {
  --pointer-x: 0px;
  --pointer-y: 0px;
  position: relative;
  width: min(720px, 100%);
  aspect-ratio: 1.06 / 1;
  margin-inline: auto;
  transform: translate3d(var(--pointer-x), var(--pointer-y), 0);
  transition: transform .2s ease-out;
  contain: layout paint style;
}

.ai-orbital-stage::before,
.ai-orbital-stage::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.ai-orbital-stage::before {
  inset: 17%;
  background: radial-gradient(circle, rgba(76, 125, 255, .18), rgba(155, 104, 255, .08) 38%, transparent 70%);
  box-shadow: 0 0 90px rgba(54, 126, 255, .18);
}

.ai-orbital-stage::after {
  left: 17%;
  right: 17%;
  bottom: 7%;
  height: 12%;
  background: radial-gradient(ellipse, rgba(67, 216, 255, .22), transparent 70%);
}

.ai-orbital-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(102, 170, 255, .2);
  will-change: transform;
}

.ai-orbital-ring::before,
.ai-orbital-ring::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 14px currentColor;
}

.ai-orbital-ring::before { top: -5px; left: 46%; }
.ai-orbital-ring::after { bottom: 13%; right: 3%; }

.ai-orbital-ring--one {
  inset: 6% 2%;
  color: var(--aio-cyan);
  animation: aiOrbitSpin 28s linear infinite;
}

.ai-orbital-ring--two {
  inset: 16% 10%;
  color: var(--aio-violet);
  border-style: dashed;
  animation: aiOrbitSpinReverse 22s linear infinite;
}

.ai-orbital-ring--three {
  inset: 26% 19%;
  color: var(--aio-gold);
  animation: aiOrbitSpin 18s linear infinite;
}

.ai-orbital-ring--four {
  inset: 34% 28%;
  color: var(--aio-coral);
  border-style: dotted;
  animation: aiOrbitSpinReverse 14s linear infinite;
}

.ai-orbital-core {
  position: absolute;
  inset: 28%;
  z-index: 4;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.08), transparent 34%),
    linear-gradient(145deg, #102a54, #061329 72%);
  border: 1px solid rgba(115, 194, 255, .36);
  box-shadow:
    0 0 0 8px rgba(77,125,255,.05),
    0 0 54px rgba(67,216,255,.25),
    0 0 100px rgba(155,104,255,.15),
    inset 0 0 36px rgba(78, 146, 255, .12);
  animation: aiCoreFloat 5.8s ease-in-out infinite;
}

.ai-core-content {
  display: grid;
  place-items: center;
  gap: .26rem;
  text-align: center;
}

.ai-core-logo-shell {
  display: grid;
  place-items: center;
  width: clamp(82px, 11vw, 124px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.08), rgba(5,16,37,.8));
  border: 1px solid rgba(139, 203, 255, .2);
  box-shadow: 0 0 24px rgba(67,216,255,.22);
}

.ai-core-logo-shell img {
  width: 82%;
  height: 82%;
  object-fit: contain;
}

.ai-core-content > strong {
  margin-top: .15rem;
  font-size: clamp(.82rem, 1.1vw, 1rem);
  letter-spacing: .22em;
  color: #fff;
}

.ai-core-content .ai-core-studio {
  font-size: clamp(.7rem, .9vw, .88rem);
  font-weight: 800;
  letter-spacing: .18em;
  color: #78d9ff;
}

.ai-core-content small {
  color: #93aed0;
  font-size: .63rem;
  letter-spacing: .08em;
}

.ai-orbital-card {
  position: absolute;
  z-index: 5;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .72rem;
  width: clamp(160px, 19vw, 225px);
  padding: .85rem .92rem;
  border: 1px solid var(--card-stroke, rgba(126,176,255,.2));
  border-radius: 18px;
  background: linear-gradient(145deg, var(--card-bg-1, #102541), var(--card-bg-2, #0a1932));
  box-shadow: 0 16px 36px rgba(0, 7, 22, .33), inset 0 1px rgba(255,255,255,.04);
  transform: translateZ(0);
  animation: aiCardFloat 6s ease-in-out infinite;
}

.ai-orbital-card-icon {
  display: grid;
  place-items: center;
  width: 42px;
  aspect-ratio: 1;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--card-a), var(--card-b));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--card-a) 34%, transparent);
}

.ai-orbital-card > span:last-child { min-width: 0; }
.ai-orbital-card strong { display: block; color: #f7fbff; font-size: .88rem; }
.ai-orbital-card strong + span { display: block; color: #9fb7d4; font-size: .69rem; line-height: 1.35; }

.ai-orbital-card--text {
  --card-a: #9b68ff; --card-b: #ff6fae;
  --card-stroke: rgba(181, 123, 255, .26);
  top: 22%; left: 0;
}
.ai-orbital-card--code {
  --card-a: #43d8ff; --card-b: #4d7dff;
  --card-stroke: rgba(67, 216, 255, .26);
  top: 23%; right: 0;
  animation-delay: -.9s;
}
.ai-orbital-card--vision {
  --card-a: #ffbc4f; --card-b: #ff7b5d;
  --card-stroke: rgba(255, 188, 79, .28);
  top: 0; left: 36%;
  animation-delay: -1.8s;
}
.ai-orbital-card--image {
  --card-a: #4d7dff; --card-b: #43d8ff;
  --card-stroke: rgba(77, 125, 255, .28);
  bottom: 4%; left: 8%;
  animation-delay: -2.7s;
}
.ai-orbital-card--workflow {
  --card-a: #ff6fae; --card-b: #9b68ff;
  --card-stroke: rgba(255, 111, 174, .25);
  bottom: 4%; right: 7%;
  animation-delay: -3.6s;
}
.ai-orbital-card--private {
  --card-a: #52e1c1; --card-b: #43d8ff;
  --card-stroke: rgba(82, 225, 193, .26);
  top: 48%; right: -1%;
  animation-delay: -4.5s;
}

@keyframes aiOrbitSpin { to { transform: rotate(360deg); } }
@keyframes aiOrbitSpinReverse { to { transform: rotate(-360deg); } }
@keyframes aiCoreFloat { 50% { transform: translateY(-7px) scale(1.01); } }
@keyframes aiCardFloat { 50% { transform: translateY(-6px); } }

/* Main shell */
.ai-studio-orbital-page main {
  position: relative;
  z-index: 3;
  background: linear-gradient(180deg, rgba(5, 15, 34, .96), rgba(4, 10, 23, .98));
}

.ai-studio-orbital-page .ai-studio-shell {
  width: min(1580px, calc(100% - 32px));
  margin: -2rem auto 4.5rem;
  position: relative;
  z-index: 4;
}

.ai-studio-intro {
  display: grid;
  grid-template-columns: minmax(0, .75fr) minmax(420px, 1.25fr);
  align-items: end;
  gap: 2rem;
  margin-bottom: 1.25rem;
  padding: 1.25rem 1.35rem;
  border-radius: 22px;
  border: 1px solid rgba(126,176,255,.14);
  background: linear-gradient(135deg, #0c203f, #0a1831 62%, #161a3b);
  box-shadow: var(--aio-shadow-soft);
}

.ai-studio-intro h2 {
  margin: .35rem 0 0;
  color: #f6f9ff;
  font-size: clamp(1.8rem, 2.5vw, 2.7rem);
}

.ai-studio-intro p {
  margin: 0;
  color: #b9cae2 !important;
  line-height: 1.65;
}

.ai-studio-orbital-page .ai-kicker--small {
  margin: 0;
}

.ai-studio-orbital-page .ai-category-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .85rem;
  margin-bottom: 1rem;
}

.ai-studio-orbital-page .ai-category-card {
  --cat-a: var(--aio-blue);
  --cat-b: var(--aio-cyan);
  position: relative;
  min-height: 142px;
  overflow: hidden;
  padding: 1rem;
  border: 1px solid rgba(126,176,255,.15);
  border-radius: 19px;
  background: linear-gradient(155deg, #102544, #0a1831);
  color: var(--aio-text);
  text-align: left;
  box-shadow: 0 13px 32px rgba(0, 7, 21, .23);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.ai-category-card:nth-child(1) { --cat-a:#4d7dff; --cat-b:#43d8ff; }
.ai-category-card:nth-child(2) { --cat-a:#9b68ff; --cat-b:#ff6fae; }
.ai-category-card:nth-child(3) { --cat-a:#43d8ff; --cat-b:#4d7dff; }
.ai-category-card:nth-child(4) { --cat-a:#ffbc4f; --cat-b:#ff7b5d; }
.ai-category-card:nth-child(5) { --cat-a:#ff6fae; --cat-b:#9b68ff; }
.ai-category-card:nth-child(6) { --cat-a:#52e1c1; --cat-b:#43d8ff; }

.ai-studio-orbital-page .ai-category-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--cat-a), var(--cat-b));
}

.ai-studio-orbital-page .ai-category-card::after {
  content: "";
  position: absolute;
  width: 110px;
  height: 110px;
  right: -48px;
  top: -48px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--cat-a) 25%, transparent), transparent 70%);
  pointer-events: none;
}

.ai-studio-orbital-page .ai-category-card:hover,
.ai-studio-orbital-page .ai-category-card.active {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--cat-a) 55%, transparent);
  box-shadow: 0 18px 42px rgba(0, 7, 21, .3), inset 0 0 0 1px color-mix(in srgb, var(--cat-a) 16%, transparent);
}

.ai-studio-orbital-page .ai-category-card i {
  display: grid;
  place-items: center;
  width: 42px;
  aspect-ratio: 1;
  margin-bottom: .8rem;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--cat-a), var(--cat-b));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--cat-a) 28%, transparent);
}

.ai-studio-orbital-page .ai-category-card strong {
  display: block;
  color: #fff;
  font-size: .98rem;
}

.ai-studio-orbital-page .ai-category-card span {
  display: block;
  margin-top: .4rem;
  color: #a9bedb;
  font-size: .8rem;
  line-height: 1.45;
}

.ai-studio-orbital-page .ai-workspace {
  display: grid;
  grid-template-columns: minmax(250px, 320px) minmax(560px, 1fr) minmax(270px, 330px);
  gap: 1rem;
  align-items: start;
}

.ai-studio-orbital-page .ai-panel {
  border: 1px solid rgba(126,176,255,.15);
  border-radius: var(--aio-radius-lg);
  background: linear-gradient(180deg, #0b1b36, #08162d);
  box-shadow: var(--aio-shadow);
  color: var(--aio-text);
  overflow: hidden;
}

.ai-studio-orbital-page .ai-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: 1rem 1.05rem;
  border-bottom: 1px solid rgba(126,176,255,.12);
  background: linear-gradient(90deg, rgba(77,125,255,.08), transparent 62%);
}

.ai-studio-orbital-page .ai-panel-header h2,
.ai-studio-orbital-page .ai-panel-header h3,
.ai-studio-orbital-page #aiCapabilityName {
  margin: 0;
  color: #f7fbff;
  font-weight: 820;
}

.ai-studio-orbital-page .ai-panel-header p,
.ai-studio-orbital-page .text-muted {
  color: #93aaca !important;
}

.ai-studio-orbital-page .ai-list {
  display: grid;
  gap: .72rem;
  max-height: 760px;
  overflow: auto;
  padding: .82rem;
}

.ai-studio-orbital-page .ai-list::-webkit-scrollbar,
.ai-studio-orbital-page .ai-history::-webkit-scrollbar {
  width: 8px;
}

.ai-studio-orbital-page .ai-list::-webkit-scrollbar-thumb,
.ai-studio-orbital-page .ai-history::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(126,176,255,.25);
}

.ai-studio-orbital-page .ai-capability {
  --cap-a: var(--aio-blue);
  --cap-b: var(--aio-cyan);
  position: relative;
  display: grid;
  gap: .42rem;
  padding: .88rem .9rem .92rem 1rem;
  border: 1px solid rgba(126,176,255,.12);
  border-radius: 16px;
  background: linear-gradient(145deg, #102543, #0a1931);
  color: var(--aio-text);
  text-align: left;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.ai-capability:nth-child(6n + 1) { --cap-a:#4d7dff; --cap-b:#43d8ff; }
.ai-capability:nth-child(6n + 2) { --cap-a:#9b68ff; --cap-b:#ff6fae; }
.ai-capability:nth-child(6n + 3) { --cap-a:#ffbc4f; --cap-b:#ff7b5d; }
.ai-capability:nth-child(6n + 4) { --cap-a:#52e1c1; --cap-b:#43d8ff; }
.ai-capability:nth-child(6n + 5) { --cap-a:#ff6fae; --cap-b:#9b68ff; }
.ai-capability:nth-child(6n + 6) { --cap-a:#43d8ff; --cap-b:#4d7dff; }

.ai-studio-orbital-page .ai-capability::before {
  content: "";
  position: absolute;
  inset: 12px auto 12px 0;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(var(--cap-a), var(--cap-b));
  opacity: .72;
}

.ai-studio-orbital-page .ai-capability:hover,
.ai-studio-orbital-page .ai-capability.active {
  transform: translateX(3px);
  border-color: color-mix(in srgb, var(--cap-a) 42%, transparent);
  background: linear-gradient(145deg, #15325b, #101f42);
}

.ai-studio-orbital-page .ai-capability.disabled {
  opacity: .64;
}

.ai-studio-orbital-page .ai-capability strong {
  color: #f5f9ff;
  font-size: .91rem;
}

.ai-studio-orbital-page .ai-capability strong i {
  color: var(--cap-a);
}

.ai-studio-orbital-page .ai-capability small {
  color: #9db3cf;
  line-height: 1.45;
}

.ai-studio-orbital-page .ai-badge {
  width: fit-content;
  padding: .28rem .56rem;
  border-radius: 999px;
  border: 1px solid rgba(137,190,255,.17);
  background: rgba(255,255,255,.045);
  color: #cde7ff;
  font-size: .68rem;
  font-weight: 800;
}

.ai-studio-orbital-page .ai-workbench {
  padding: 1.05rem;
}

.ai-studio-orbital-page .ai-model-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: .8rem;
  margin-bottom: .8rem;
}

.ai-studio-orbital-page .ai-field {
  display: grid;
  gap: .48rem;
  margin-bottom: .8rem;
  color: #bfd0e8;
  font-size: .86rem;
  font-weight: 740;
}

.ai-studio-orbital-page .ai-field textarea {
  min-height: 190px;
  resize: vertical;
}

.ai-studio-orbital-page .ai-field .form-control,
.ai-studio-orbital-page .ai-field .form-select,
.ai-studio-orbital-page .ai-form-control,
.ai-studio-orbital-page input,
.ai-studio-orbital-page textarea,
.ai-studio-orbital-page select {
  border-radius: 13px;
  border-color: rgba(126,176,255,.18);
  background-color: #0c1f3c;
  color: #f3f8ff;
  box-shadow: none;
}

.ai-studio-orbital-page .form-control::placeholder,
.ai-studio-orbital-page textarea::placeholder {
  color: #7189a9;
}

.ai-studio-orbital-page .form-control:focus,
.ai-studio-orbital-page .form-select:focus,
.ai-studio-orbital-page input:focus,
.ai-studio-orbital-page textarea:focus,
.ai-studio-orbital-page select:focus {
  border-color: rgba(106, 181, 255, .55);
  box-shadow: 0 0 0 .2rem rgba(77,125,255,.13);
}

.ai-studio-orbital-page option {
  background: #0c1f3c;
  color: #fff;
}

.ai-studio-orbital-page .ai-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

.ai-studio-orbital-page .ai-suggestions {
  display: grid;
  gap: .7rem;
  margin: 0 0 .95rem;
}

.ai-studio-orbital-page .ai-suggestion-group strong {
  color: #8ea8ca;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ai-studio-orbital-page .ai-suggestion-group div {
  display: flex;
  flex-wrap: wrap;
  gap: .48rem;
}

.ai-studio-orbital-page .ai-suggestion-group button {
  border: 1px solid rgba(126,176,255,.16);
  border-radius: 999px;
  background: #102441;
  color: #cfe4ff;
  padding: .48rem .72rem;
  font-size: .78rem;
  font-weight: 700;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.ai-studio-orbital-page .ai-suggestion-group button:hover {
  transform: translateY(-1px);
  border-color: rgba(155,104,255,.42);
  background: #172b50;
}

.ai-studio-orbital-page .ai-image-controls,
.ai-studio-orbital-page .ai-workflow-card,
.ai-studio-orbital-page .ai-advanced-card,
.ai-studio-orbital-page .ai-contract-notice,
.ai-studio-orbital-page .ai-private-adult-panel,
.ai-studio-orbital-page .ai-mask-editor {
  margin: .9rem 0;
  padding: 1rem;
  border: 1px solid rgba(126,176,255,.15);
  border-radius: 18px;
  background: linear-gradient(145deg, #102541, #0a1931);
  color: var(--aio-text);
  box-shadow: 0 12px 30px rgba(0, 8, 24, .2);
}

.ai-studio-orbital-page .ai-image-controls[hidden],
.ai-studio-orbital-page .ai-workflow-card[hidden],
.ai-studio-orbital-page .ai-field[hidden],
.ai-studio-orbital-page .ai-private-adult-panel[hidden],
.ai-studio-orbital-page .ai-mask-editor[hidden] {
  display: none !important;
}

.ai-studio-orbital-page .ai-workflow-banner {
  display: grid;
  gap: .7rem;
  margin-bottom: .9rem;
  padding: 1rem;
  border: 1px solid rgba(155,104,255,.2);
  border-radius: 17px;
  background: linear-gradient(135deg, rgba(77,125,255,.13), rgba(155,104,255,.10), rgba(255,111,174,.06));
  color: #eaf4ff;
}

.ai-studio-orbital-page .ai-workflow-banner p,
.ai-studio-orbital-page .ai-workflow-card-head span,
.ai-studio-orbital-page .ai-structured-title span,
.ai-studio-orbital-page .ai-mask-header span,
.ai-studio-orbital-page .ai-private-adult-panel p,
.ai-studio-orbital-page .ai-mask-help {
  color: #a3b9d5 !important;
}

.ai-studio-orbital-page .ai-beta-pill {
  width: fit-content;
  padding: .34rem .64rem;
  border-radius: 999px;
  border: 1px solid rgba(255,188,79,.3);
  background: rgba(255,188,79,.1);
  color: #ffd793;
  font-size: .72rem;
  font-weight: 820;
}

.ai-studio-orbital-page .ai-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}

.ai-studio-orbital-page .ai-upload-zone {
  position: relative;
  display: grid;
  gap: .65rem;
  min-height: 205px;
  margin: 0;
  padding: 1rem;
  overflow: hidden;
  cursor: pointer;
  border: 1px dashed rgba(126,176,255,.3);
  border-radius: 17px;
  background: linear-gradient(145deg, #132a4c, #0b1b36);
  color: var(--aio-text);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.ai-studio-orbital-page .ai-upload-zone::after {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  right: -55px;
  top: -55px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(67,216,255,.13), transparent 70%);
  pointer-events: none;
}

.ai-studio-orbital-page .ai-upload-zone:nth-child(2)::after {
  background: radial-gradient(circle, rgba(155,104,255,.15), transparent 70%);
}

.ai-studio-orbital-page .ai-upload-zone:hover,
.ai-studio-orbital-page .ai-upload-zone.dragging,
.ai-studio-orbital-page .ai-upload-zone.has-file {
  transform: translateY(-2px);
  border-color: rgba(104, 186, 255, .55);
  box-shadow: 0 18px 38px rgba(0, 7, 21, .25);
}

.ai-studio-orbital-page .ai-upload-icon,
.ai-studio-orbital-page .ai-result-state i,
.ai-studio-orbital-page .ai-job-icon {
  display: grid;
  place-items: center;
  width: 44px;
  aspect-ratio: 1;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--aio-blue), var(--aio-cyan));
  box-shadow: 0 10px 24px rgba(77,125,255,.24);
}

.ai-studio-orbital-page .ai-upload-zone:nth-child(2) .ai-upload-icon {
  background: linear-gradient(135deg, var(--aio-violet), var(--aio-coral));
  box-shadow: 0 10px 24px rgba(155,104,255,.22);
}

.ai-studio-orbital-page .ai-upload-zone strong,
.ai-studio-orbital-page .ai-workflow-card-head strong,
.ai-studio-orbital-page .ai-structured-title strong,
.ai-studio-orbital-page .ai-mask-header strong {
  color: #fff;
}

.ai-studio-orbital-page .ai-upload-zone small,
.ai-studio-orbital-page .ai-upload-filename {
  color: #a9bdd8;
}

.ai-studio-orbital-page .ai-upload-filename {
  width: fit-content;
  padding: .36rem .65rem;
  border-radius: 999px;
  border: 1px solid rgba(126,176,255,.16);
  background: rgba(255,255,255,.045);
  font-size: .74rem;
  font-weight: 760;
  overflow-wrap: anywhere;
}

.ai-studio-orbital-page .ai-upload-preview,
.ai-studio-orbital-page .ai-result-preview {
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  border-radius: 16px;
  border: 1px solid rgba(126,176,255,.18);
  background: #060e1e;
}

.ai-studio-orbital-page .ai-upload-actions,
.ai-studio-orbital-page .ai-image-policy,
.ai-studio-orbital-page .ai-runtime-chips,
.ai-studio-orbital-page .ai-guardrail-strip,
.ai-studio-orbital-page .ai-job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.ai-studio-orbital-page .ai-upload-actions {
  margin: .75rem 0 .9rem;
}

.ai-studio-orbital-page .ai-image-policy span,
.ai-studio-orbital-page .ai-runtime-chip,
.ai-studio-orbital-page .ai-guardrail-chip,
.ai-studio-orbital-page .ai-job-meta span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 30px;
  padding: .36rem .62rem;
  border-radius: 999px;
  border: 1px solid rgba(126,176,255,.15);
  background: #102541;
  color: #cde1f9;
  font-size: .74rem;
  font-weight: 740;
}

.ai-studio-orbital-page .ai-image-policy span:nth-child(4n+1) i,
.ai-studio-orbital-page .ai-runtime-chip:nth-child(4n+1) i,
.ai-studio-orbital-page .ai-guardrail-chip:nth-child(4n+1) i { color: var(--aio-cyan); }
.ai-studio-orbital-page .ai-image-policy span:nth-child(4n+2) i,
.ai-studio-orbital-page .ai-runtime-chip:nth-child(4n+2) i,
.ai-studio-orbital-page .ai-guardrail-chip:nth-child(4n+2) i { color: var(--aio-violet); }
.ai-studio-orbital-page .ai-image-policy span:nth-child(4n+3) i,
.ai-studio-orbital-page .ai-runtime-chip:nth-child(4n+3) i,
.ai-studio-orbital-page .ai-guardrail-chip:nth-child(4n+3) i { color: var(--aio-gold); }
.ai-studio-orbital-page .ai-image-policy span:nth-child(4n+4) i,
.ai-studio-orbital-page .ai-runtime-chip:nth-child(4n+4) i,
.ai-studio-orbital-page .ai-guardrail-chip:nth-child(4n+4) i { color: var(--aio-coral); }

.ai-studio-orbital-page .ai-advanced-card {
  padding: 0;
  overflow: hidden;
}

.ai-studio-orbital-page .ai-advanced-card summary,
.ai-studio-orbital-page .ai-runtime-details summary,
.ai-studio-orbital-page .ai-contract-tips summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  cursor: pointer;
  padding: .8rem .9rem;
  color: #eaf4ff;
  font-weight: 800;
}

.ai-studio-orbital-page .ai-advanced-card summary::-webkit-details-marker,
.ai-studio-orbital-page .ai-runtime-details summary::-webkit-details-marker {
  display: none;
}

.ai-studio-orbital-page .ai-advanced-card summary::after,
.ai-studio-orbital-page .ai-runtime-details summary::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--aio-cyan);
  transition: transform .18s ease;
}

.ai-studio-orbital-page .ai-advanced-card[open] summary::after,
.ai-studio-orbital-page .ai-runtime-details[open] summary::after {
  transform: rotate(180deg);
}

.ai-studio-orbital-page .ai-advanced-card summary small {
  color: #8fa8c9;
}

.ai-studio-orbital-page .ai-advanced-card > .ai-form-grid,
.ai-studio-orbital-page .ai-advanced-card > .ai-field {
  padding: 0 .9rem .9rem;
}

.ai-studio-orbital-page .ai-contract-notice {
  display: none;
  border-left: 4px solid var(--aio-blue);
}

.ai-studio-orbital-page .ai-contract-notice.visible { display: block; }
.ai-studio-orbital-page .ai-contract-notice strong { display: block; margin-bottom: .28rem; color: #fff; }
.ai-studio-orbital-page .ai-contract-notice span { display: block; color: #a8bdd8; font-size: .84rem; }
.ai-studio-orbital-page .ai-contract-grid { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .65rem; }
.ai-studio-orbital-page .ai-contract-grid em { font-style: normal; padding: .34rem .58rem; border-radius: 999px; background: #132b50; border: 1px solid rgba(126,176,255,.16); color: #d9edff; font-size: .72rem; }

.ai-studio-orbital-page .ai-private-adult-panel {
  border-left: 4px solid var(--aio-coral);
  background: linear-gradient(145deg, rgba(72,25,67,.55), #101b38);
}
.ai-studio-orbital-page .ai-private-adult-panel strong { display:block; margin-bottom:.35rem; color:#ffd8ed; }
.ai-studio-orbital-page .ai-private-adult-confirmations { display:grid; gap:.6rem; }
.ai-studio-orbital-page .ai-private-adult-confirmations label { display:flex; gap:.6rem; align-items:flex-start; color:#d9e6f7; font-size:.88rem; }

.ai-studio-orbital-page .ai-mask-stage {
  position: relative;
  min-height: 230px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px dashed rgba(126,176,255,.28);
  border-radius: 16px;
  background:
    linear-gradient(45deg, #0a1931 25%, transparent 25%),
    linear-gradient(-45deg, #0a1931 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #0a1931 75%),
    linear-gradient(-45deg, transparent 75%, #0a1931 75%),
    #0d213e;
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  touch-action: none;
}

.ai-studio-orbital-page .ai-mask-stage img {
  display:block;
  max-width:100%;
  max-height:560px;
  object-fit:contain;
}

.ai-studio-orbital-page .ai-mask-stage canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  cursor:crosshair;
  touch-action:none;
}

.ai-studio-orbital-page .ai-mask-empty {
  position:absolute;
  padding:.8rem 1rem;
  border-radius:13px;
  background:#102541;
  color:#a9bdd8;
  font-weight:700;
}

.ai-studio-orbital-page .ai-mask-toolbar {
  display:grid;
  grid-template-columns:minmax(220px,1fr) auto auto;
  gap:.65rem;
  align-items:end;
  margin-top:.8rem;
}

.ai-studio-orbital-page .ai-run-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  width: 100%;
  margin-top: .2rem;
}

/* Result states */
.ai-studio-orbital-page .ai-result {
  min-height: 260px;
  margin-top: .9rem;
  padding: 1rem;
  white-space: pre-wrap;
  line-height: 1.6;
  border: 1px solid rgba(126,176,255,.15);
  border-radius: 18px;
  background: linear-gradient(145deg, #0d203e, #08162c);
  color: #eaf4ff;
}

.ai-studio-orbital-page .ai-result.empty { color: #95adca; }

.ai-studio-orbital-page .ai-result-state {
  display:grid;
  gap:.8rem;
  place-items:center;
  min-height:220px;
  text-align:center;
}

.ai-studio-orbital-page .ai-result-state strong,
.ai-studio-orbital-page .ai-image-result strong,
.ai-studio-orbital-page .ai-job-state strong { color:#f7fbff; }
.ai-studio-orbital-page .ai-result-state p,
.ai-studio-orbital-page .ai-image-result p,
.ai-studio-orbital-page .ai-job-state p { color:#a4b9d5; }

.ai-studio-orbital-page .ai-progress-steps,
.ai-studio-orbital-page .ai-job-steps {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.55rem;
  width:100%;
  margin:0;
  padding:0;
  list-style:none;
}

.ai-studio-orbital-page .ai-progress-steps span,
.ai-studio-orbital-page .ai-job-steps li {
  min-height:52px;
  display:grid;
  place-items:center;
  padding:.55rem;
  border:1px solid rgba(126,176,255,.14);
  border-radius:13px;
  background:#102541;
  color:#a9bdd8;
  font-size:.75rem;
  font-weight:760;
}

.ai-studio-orbital-page .ai-job-state {
  display:grid;
  gap:.85rem;
  width:100%;
  padding:1rem;
  border:1px solid rgba(126,176,255,.15);
  border-radius:16px;
  background:linear-gradient(145deg,#102541,#0a1931);
  color:#eaf4ff;
  white-space:normal;
}

.ai-studio-orbital-page .ai-job-state-head {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.75rem;
  align-items:center;
  text-align:left;
}

.ai-studio-orbital-page .ai-job-state small { color:#8fa8c9; }

.ai-studio-orbital-page .ai-job-track {
  position:relative;
  height:8px;
  overflow:hidden;
  border-radius:999px;
  background:#172d50;
}
.ai-studio-orbital-page .ai-job-track span {
  position:absolute;
  inset:0 auto 0 0;
  width:40%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--aio-blue),var(--aio-cyan),var(--aio-violet));
}
.ai-studio-orbital-page .ai-job-track span[data-indeterminate="true"] { animation: aiJobIndeterminate 1.25s ease-in-out infinite; }
.ai-studio-orbital-page .ai-job-steps li[data-state="done"] { color:#b4f7e9; border-color:rgba(82,225,193,.28); background:rgba(82,225,193,.08); }
.ai-studio-orbital-page .ai-job-steps li[data-state="active"] { color:#d7e4ff; border-color:rgba(77,125,255,.32); background:rgba(77,125,255,.1); }
@keyframes aiJobIndeterminate { from { transform:translateX(-90%); } to { transform:translateX(250%); } }

.ai-studio-orbital-page .ai-result-metrics,
.ai-studio-orbital-page .ai-image-result dl {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.55rem;
}

.ai-studio-orbital-page .ai-result-metrics span,
.ai-studio-orbital-page .ai-image-result dl div {
  padding:.72rem;
  border:1px solid rgba(126,176,255,.13);
  border-radius:13px;
  background:#102541;
}

.ai-studio-orbital-page .ai-result-metrics i { color:var(--aio-cyan); }
.ai-studio-orbital-page .ai-result-metrics em,
.ai-studio-orbital-page .ai-image-result dt { color:#8ca5c6; font-size:.7rem; font-style:normal; text-transform:uppercase; }
.ai-studio-orbital-page .ai-result-metrics b,
.ai-studio-orbital-page .ai-image-result dd { color:#f2f7ff; }

/* Runtime and history */
.ai-studio-orbital-page .ai-side {
  display:grid;
  gap:1rem;
}

.ai-studio-orbital-page .ai-runtime-board {
  display:grid;
  gap:.8rem;
  padding:.85rem;
}

.ai-studio-orbital-page .ai-runtime-hero {
  position:relative;
  overflow:hidden;
  padding:.9rem;
  border:1px solid rgba(155,104,255,.2);
  border-radius:17px;
  background:
    radial-gradient(circle at 10% 12%, rgba(77,125,255,.18), transparent 28%),
    linear-gradient(135deg,#102541,#171d46);
}

.ai-studio-orbital-page .ai-runtime-hero-main {
  position:relative;
  display:grid;
  grid-template-columns:84px minmax(0,1fr);
  gap:.75rem;
  align-items:center;
}

.ai-studio-orbital-page .ai-runtime-ring {
  --pct:82;
  width:76px;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:
    radial-gradient(circle,#0d1f3c 56%,transparent 58%),
    conic-gradient(var(--aio-violet) calc(var(--pct)*1%), rgba(155,104,255,.12) 0);
  box-shadow:0 10px 24px rgba(95,85,255,.18);
}

.ai-studio-orbital-page .ai-runtime-ring strong { color:#fff; }
.ai-studio-orbital-page .ai-runtime-copy small { color:#a4b9d5; }
.ai-studio-orbital-page .ai-runtime-copy strong { display:block; color:#fff; line-height:1.25; }
.ai-studio-orbital-page .ai-runtime-copy span { color:#a6bad5; font-size:.8rem; line-height:1.4; }

.ai-studio-orbital-page .ai-runtime-metrics {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.6rem;
}

.ai-studio-orbital-page .ai-runtime-meter {
  padding:.7rem;
  border:1px solid rgba(126,176,255,.13);
  border-radius:14px;
  background:#102541;
}
.ai-studio-orbital-page .ai-runtime-meter span { color:#8ca5c6; font-size:.7rem; text-transform:uppercase; }
.ai-studio-orbital-page .ai-runtime-meter strong { display:block; color:#fff; margin-top:.25rem; }
.ai-studio-orbital-page .ai-runtime-bar { --pct:50; height:7px; margin-top:.55rem; overflow:hidden; border-radius:999px; background:#1a3153; }
.ai-studio-orbital-page .ai-runtime-bar::before { content:""; display:block; width:calc(var(--pct)*1%); height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--aio-cyan),var(--aio-violet)); }

.ai-studio-orbital-page .ai-guardrail-strip {
  padding:.65rem;
  border:1px solid rgba(126,176,255,.13);
  border-radius:14px;
  background:#0c1f3c;
}

.ai-studio-orbital-page .ai-runtime-details {
  overflow:hidden;
  border:1px solid rgba(126,176,255,.13);
  border-radius:14px;
  background:#0c1f3c;
}
.ai-studio-orbital-page .ai-runtime-details p { margin:0; padding:0 .8rem .8rem; color:#9eb3d0; font-size:.8rem; line-height:1.45; }

.ai-studio-orbital-page .ai-history {
  display:grid;
  gap:.6rem;
  max-height:340px;
  overflow:auto;
  padding:.8rem;
}

.ai-studio-orbital-page .ai-history-item,
.ai-studio-orbital-page .ai-history > article,
.ai-studio-orbital-page .ai-history > div {
  padding:.72rem;
  border:1px solid rgba(126,176,255,.13);
  border-radius:14px;
  background:#102541;
  color:#eaf4ff;
}
.ai-studio-orbital-page .ai-history-item strong { color:#fff; }
.ai-studio-orbital-page .ai-history-item span { color:#94adcb; }

/* Privacy and footer */
.ai-studio-orbital-page .ai-privacy {
  width:min(1260px,calc(100% - 32px));
  margin:0 auto 4.5rem;
  padding:1.35rem;
  border:1px solid rgba(126,176,255,.15);
  border-radius:24px;
  background:linear-gradient(135deg,#0d203e,#111b3d 62%,#0a1b35);
  box-shadow:var(--aio-shadow);
}

.ai-studio-orbital-page .ai-privacy h2 { color:#f6f9ff; }
.ai-studio-orbital-page .ai-privacy .text-primary { color:#7adfff !important; }
.ai-studio-orbital-page .ai-privacy-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.75rem;
}
.ai-studio-orbital-page .ai-privacy-grid article {
  padding:.85rem;
  border:1px solid rgba(126,176,255,.13);
  border-radius:15px;
  background:#102541;
}
.ai-studio-orbital-page .ai-privacy-grid strong { display:block; color:#fff; margin-bottom:.25rem; }
.ai-studio-orbital-page .ai-privacy-grid span { color:#9fb4cf; font-size:.86rem; }

.ai-studio-orbital-page #footer-placeholder,
.ai-studio-orbital-page footer {
  color:#c8d8eb;
}

/* No progressive scroll loading */
.ai-studio-orbital-page .ai-orbital-reveal,
.ai-studio-orbital-page .ai-studio-intro,
.ai-studio-orbital-page .ai-category-strip,
.ai-studio-orbital-page .ai-workspace > .ai-panel,
.ai-studio-orbital-page .ai-privacy {
  opacity:1 !important;
  transform:none !important;
  transition-delay:0s !important;
  visibility:visible !important;
}

/* Theme accents driven by the optimized JS */
body[data-ai-theme="text"] { --aio-focus-a:#9b68ff; --aio-focus-b:#ff6fae; }
body[data-ai-theme="code"] { --aio-focus-a:#43d8ff; --aio-focus-b:#4d7dff; }
body[data-ai-theme="productivity"] { --aio-focus-a:#ffbc4f; --aio-focus-b:#ff7b5d; }
body[data-ai-theme="assistant"] { --aio-focus-a:#ff6fae; --aio-focus-b:#9b68ff; }
body[data-ai-theme="image"] { --aio-focus-a:#4d7dff; --aio-focus-b:#43d8ff; }

body[data-ai-theme] .ai-workbench {
  box-shadow: 0 26px 70px rgba(0,5,18,.42), inset 0 2px 0 color-mix(in srgb, var(--aio-focus-a) 40%, transparent);
}

/* Responsive */
@media (max-width: 1399.98px) {
  .ai-studio-orbital-page .ai-hero-grid {
    grid-template-columns:minmax(0,.94fr) minmax(500px,1.06fr);
    gap:2.3rem;
  }
  .ai-studio-orbital-page .ai-workspace {
    grid-template-columns:minmax(230px,290px) minmax(520px,1fr);
  }
  .ai-studio-orbital-page .ai-side {
    grid-column:1/-1;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 1199.98px) {
  .ai-studio-orbital-page .ai-hero.ai-orbital-hero {
    min-height:auto;
    padding-top:4.2rem;
  }
  .ai-studio-orbital-page .ai-hero-grid {
    grid-template-columns:1fr;
  }
  .ai-hero-copy-column { max-width:760px; }
  .ai-studio-orbital-page .ai-hero h1 { max-width:12ch; }
  .ai-studio-orbital-page .ai-hero-visual { min-height:540px; }
  .ai-studio-orbital-page .ai-category-strip { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ai-studio-orbital-page .ai-workspace { grid-template-columns:1fr; }
  .ai-studio-orbital-page .ai-side { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ai-studio-intro { grid-template-columns:1fr; gap:.7rem; align-items:start; }
}

@media (max-width: 767.98px) {
  :root { --aio-nav-h: 68px; }
  .ai-studio-orbital-page .navbar-collapse {
    margin-top:.8rem;
    padding:.8rem;
    border:1px solid rgba(126,176,255,.15);
    border-radius:16px;
    background:#081830;
  }
  .ai-studio-orbital-page .ai-hero.ai-orbital-hero {
    padding:3.2rem .7rem 3rem;
  }
  .ai-studio-orbital-page .ai-hero-inner { width:min(100%,calc(100% - 8px)); }
  .ai-hero-copy-column::before { inset:-1.5rem -1rem -1.5rem -1rem; }
  .ai-studio-orbital-page .ai-hero h1 { font-size:clamp(2.7rem,13vw,4.2rem); max-width:11ch; }
  .ai-studio-orbital-page .ai-hero-copy { font-size:1rem; line-height:1.65; }
  .ai-studio-orbital-page .ai-hero-status,
  .ai-studio-orbital-page .ai-category-strip,
  .ai-studio-orbital-page .ai-form-grid,
  .ai-studio-orbital-page .ai-upload-grid,
  .ai-studio-orbital-page .ai-progress-steps,
  .ai-studio-orbital-page .ai-result-metrics,
  .ai-studio-orbital-page .ai-image-result dl,
  .ai-studio-orbital-page .ai-privacy-grid,
  .ai-studio-orbital-page .ai-model-row,
  .ai-studio-orbital-page .ai-runtime-metrics,
  .ai-studio-orbital-page .ai-side {
    grid-template-columns:1fr;
  }
  .ai-studio-orbital-page .ai-hero-visual { min-height:440px; }
  .ai-orbital-stage { width:min(520px,100%); }
  .ai-orbital-card { width:150px; padding:.62rem; gap:.5rem; }
  .ai-orbital-card-icon { width:34px; border-radius:11px; }
  .ai-orbital-card strong { font-size:.76rem; }
  .ai-orbital-card strong + span { font-size:.61rem; }
  .ai-orbital-card--text { left:-2%; }
  .ai-orbital-card--code { right:-2%; }
  .ai-orbital-card--vision { left:31%; }
  .ai-orbital-card--private { right:-3%; }
  .ai-studio-orbital-page .ai-studio-shell { width:min(100% - 14px,100%); margin-top:-1rem; }
  .ai-studio-intro { padding:1rem; border-radius:18px; }
  .ai-studio-orbital-page .ai-category-card { min-height:auto; }
  .ai-studio-orbital-page .ai-workbench { padding:.8rem; }
  .ai-studio-orbital-page .ai-mask-toolbar { grid-template-columns:1fr 1fr; }
  .ai-studio-orbital-page .ai-mask-toolbar .ai-field { grid-column:1/-1; }
}

@media (max-width: 479.98px) {
  .ai-studio-orbital-page .ai-hero-actions .btn { width:100%; justify-content:center; }
  .ai-studio-orbital-page .ai-hero-status { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ai-studio-orbital-page .ai-hero-visual { min-height:390px; }
  .ai-orbital-card { width:132px; }
  .ai-orbital-card strong + span { display:none; }
  .ai-orbital-card--image { left:0; }
  .ai-orbital-card--workflow { right:0; }
  .ai-orbital-core { inset:30%; }
  .ai-core-logo-shell { width:74px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .ai-studio-orbital-page *,
  .ai-studio-orbital-page *::before,
  .ai-studio-orbital-page *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ==========================================================
   PIXICORE MASK RESPONSIVE ALIGNMENT V1
   Canvas display coordinates are managed by ai-studio.js and
   follow the rendered image instead of filling the entire stage.
   ========================================================== */

.ai-studio-orbital-page .ai-mask-stage canvas {
  position: absolute;
  inset: auto;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  transform: none;
}

.ai-studio-orbital-page .ai-mask-stage img {
  width: auto;
  height: auto;
}

.ai-studio-orbital-page
.ai-mask-stage[data-mask-ready="true"] {
  align-items: center;
  justify-items: center;
}

/* === PIXICORE AI STUDIO MOBILE ORBIT FIRST V1 START === */

/*
 * Sur desktop, la composition reste inchangée :
 * texte à gauche, orbite à droite.
 *
 * Sur tablette et mobile, l’orbite devient le premier
 * élément du hero, comme sur les autres pages PixiCore.
 */
@media (max-width: 1199.98px) {
  .ai-studio-orbital-page .ai-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "visual"
      "copy";
    gap: clamp(1.1rem, 4vw, 2rem);
  }

  .ai-studio-orbital-page .ai-hero-visual {
    grid-area: visual;
    order: 1;
    width: 100%;
    margin: 0 auto;
  }

  .ai-studio-orbital-page .ai-hero-copy-column {
    grid-area: copy;
    order: 2;
    width: 100%;
    max-width: 760px;
    margin-inline: auto;
  }
}

@media (max-width: 767.98px) {
  .ai-studio-orbital-page .ai-hero.ai-orbital-hero {
    padding-top: clamp(1.1rem, 4vw, 1.8rem);
  }

  .ai-studio-orbital-page .ai-hero-grid {
    gap: 0.65rem;
  }

  .ai-studio-orbital-page .ai-hero-visual {
    min-height: clamp(350px, 92vw, 440px);
    margin-top: -0.3rem;
    margin-bottom: -0.35rem;
    overflow: visible;
  }

  .ai-studio-orbital-page .ai-orbital-stage {
    width: min(520px, 100%);
    margin-inline: auto;
  }

  .ai-studio-orbital-page .ai-hero-copy-column {
    position: relative;
    z-index: 4;
    padding-inline: 0.3rem;
  }

  .ai-studio-orbital-page .ai-hero-copy-column::before {
    inset: -1rem -0.6rem -1.2rem;
  }
}

@media (max-width: 479.98px) {
  .ai-studio-orbital-page .ai-hero-visual {
    min-height: clamp(330px, 96vw, 390px);
    margin-top: -0.55rem;
    margin-bottom: -0.25rem;
  }

  .ai-studio-orbital-page .ai-hero h1 {
    margin-top: 0.7rem;
  }
}

/* === PIXICORE AI STUDIO MOBILE ORBIT FIRST V1 END === */

/* === PIXICORE AI STUDIO ORBIT TABLET V2 START === */

/*
 * Empêche le haut de l’orbite, les anneaux et les cartes
 * de se faire rogner par la zone de rendu du stage.
 */
.ai-studio-orbital-page .ai-hero.ai-orbital-hero {
  overflow-x: clip;
  overflow-y: visible;
}

.ai-studio-orbital-page .ai-hero-inner,
.ai-studio-orbital-page .ai-hero-grid,
.ai-studio-orbital-page .ai-hero-visual {
  overflow: visible;
}

.ai-studio-orbital-page .ai-hero-visual {
  box-sizing: border-box;
  padding-top: clamp(1rem, 2vw, 1.65rem);
}

.ai-studio-orbital-page .ai-orbital-stage {
  /*
   * contain: paint provoquait potentiellement le rognage
   * des éléments débordant du cadre principal.
   */
  contain: layout style;
  overflow: visible;

  margin-top: clamp(0.45rem, 1.2vw, 1rem);
  margin-bottom: 0;
}

/*
 * Tablettes :
 * on conserve une composition proche du desktop.
 *
 * Texte à gauche.
 * Orbite à droite.
 * Aucun passage en empilement mobile.
 */
@media (
  min-width: 768px
) and (
  max-width: 1199.98px
) {
  .ai-studio-orbital-page
  .ai-hero.ai-orbital-hero {
    min-height: clamp(680px, 82vh, 820px);

    padding:
      clamp(4rem, 7vw, 5.6rem)
      clamp(1rem, 3vw, 2rem)
      clamp(3.5rem, 6vw, 5rem);
  }

  .ai-studio-orbital-page
  .ai-hero-inner {
    width: min(1440px, calc(100% - 20px));
  }

  .ai-studio-orbital-page
  .ai-hero-grid {
    display: grid;

    grid-template-columns:
      minmax(280px, 0.88fr)
      minmax(380px, 1.12fr);

    grid-template-areas: "copy visual";

    align-items: center;

    gap:
      clamp(1.25rem, 3vw, 2.6rem);
  }

  .ai-studio-orbital-page
  .ai-hero-copy-column {
    grid-area: copy;
    order: 1;

    width: 100%;
    max-width: 620px;

    margin: 0;

    text-align: left;
  }

  .ai-studio-orbital-page
  .ai-hero-visual {
    grid-area: visual;
    order: 2;

    width: 100%;
    min-width: 0;

    min-height:
      clamp(490px, 57vw, 620px);

    padding-top:
      clamp(1.25rem, 2.4vw, 2rem);

    margin: 0;
  }

  .ai-studio-orbital-page
  .ai-orbital-stage {
    width:
      min(650px, 100%);

    margin:
      clamp(0.35rem, 1vw, 0.85rem)
      auto
      0;
  }

  .ai-studio-orbital-page
  .ai-hero-copy-column .ai-kicker {
    justify-content: flex-start;
    margin-inline: 0;
  }

  .ai-studio-orbital-page
  .ai-hero-copy-column h1 {
    width: 100%;
    max-width: 12ch;

    margin:
      0
      0
      clamp(1rem, 2vw, 1.4rem);

    text-align: left;

    font-size:
      clamp(2.35rem, 4.5vw, 3.8rem);

    line-height: 1.04;
  }

  .ai-studio-orbital-page
  .ai-hero-copy-column .ai-hero-copy {
    width: 100%;
    max-width: 610px;

    margin:
      0
      0
      clamp(1.25rem, 2.5vw, 1.8rem);

    text-align: left;
  }

  .ai-studio-orbital-page
  .ai-hero-copy-column .ai-hero-actions {
    justify-content: flex-start;

    width: 100%;

    margin:
      0
      0
      clamp(1.3rem, 2.7vw, 1.9rem);
  }

  .ai-studio-orbital-page
  .ai-hero-copy-column .ai-hero-status {
    width: 100%;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    margin-inline: 0;
  }
}

/*
 * Mobiles uniquement :
 * l’orbite reste en première position.
 */
@media (max-width: 767.98px) {
  .ai-studio-orbital-page
  .ai-hero.ai-orbital-hero {
    overflow-x: clip;
    overflow-y: visible;

    padding-top:
      clamp(3.6rem, 12vw, 4.6rem);
  }

  .ai-studio-orbital-page
  .ai-hero-grid {
    display: grid;

    grid-template-columns:
      minmax(0, 1fr);

    grid-template-areas:
      "visual"
      "copy";

    gap:
      clamp(1rem, 4vw, 1.55rem);
  }

  .ai-studio-orbital-page
  .ai-hero-visual {
    grid-area: visual;
    order: 1;

    min-height:
      clamp(410px, 108vw, 500px);

    padding-top:
      clamp(1.15rem, 5vw, 1.8rem);

    margin:
      0
      auto;
  }

  .ai-studio-orbital-page
  .ai-orbital-stage {
    width:
      min(540px, 100%);

    margin:
      clamp(0.4rem, 2vw, 0.8rem)
      auto
      0;
  }

  .ai-studio-orbital-page
  .ai-hero-copy-column {
    grid-area: copy;
    order: 2;
  }
}

@media (max-width: 479.98px) {
  .ai-studio-orbital-page
  .ai-hero-visual {
    min-height:
      clamp(380px, 110vw, 445px);

    padding-top:
      clamp(1.15rem, 6vw, 1.65rem);
  }

  .ai-studio-orbital-page
  .ai-orbital-stage {
    margin-top: 0.45rem;
  }
}

/* === PIXICORE AI STUDIO ORBIT TABLET V2 END === */

/* === PIXICORE AI STUDIO REDUCE TOP SPACING V1 START === */

/*
 * Réduction légère de la marge supérieure.
 * Le débordement reste visible pour ne couper
 * ni les anneaux ni les cartes orbitales.
 */
.ai-studio-orbital-page .ai-hero.ai-orbital-hero {
  padding-top: clamp(2.9rem, 5vw, 4.2rem);
}

.ai-studio-orbital-page .ai-hero-visual {
  padding-top: clamp(0.55rem, 1.25vw, 1rem);
}

.ai-studio-orbital-page .ai-orbital-stage {
  margin-top: clamp(0.15rem, 0.5vw, 0.4rem);
}

/* Tablette : conserver le layout desktop sans excès de vide */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .ai-studio-orbital-page .ai-hero.ai-orbital-hero {
    padding-top: clamp(3.2rem, 5vw, 4.25rem);
  }

  .ai-studio-orbital-page .ai-hero-visual {
    padding-top: clamp(0.7rem, 1.4vw, 1.1rem);
  }

  .ai-studio-orbital-page .ai-orbital-stage {
    margin-top: clamp(0.15rem, 0.45vw, 0.35rem);
  }
}

/* Mobile : orbite en haut, mais plus proche de la navbar */
@media (max-width: 767.98px) {
  .ai-studio-orbital-page .ai-hero.ai-orbital-hero {
    padding-top: clamp(2.8rem, 8vw, 3.6rem);
  }

  .ai-studio-orbital-page .ai-hero-visual {
    padding-top: clamp(0.65rem, 2.5vw, 1rem);
  }

  .ai-studio-orbital-page .ai-orbital-stage {
    margin-top: 0.15rem;
  }
}

@media (max-width: 479.98px) {
  .ai-studio-orbital-page .ai-hero.ai-orbital-hero {
    padding-top: clamp(2.5rem, 7vw, 3.1rem);
  }

  .ai-studio-orbital-page .ai-hero-visual {
    padding-top: 0.55rem;
  }

  .ai-studio-orbital-page .ai-orbital-stage {
    margin-top: 0.1rem;
  }
}

/* === PIXICORE AI STUDIO REDUCE TOP SPACING V1 END === */