/* UAOE Galaxy surface: local, dependency-free visual treatment.
   Presentation only; it never changes provider state or claims a live cloud connection. */
html.galaxy {
  color-scheme: dark;
  --galaxy-ink: #edf5ff;
  --galaxy-muted: #a9b9d2;
  --galaxy-blue: #74b9ff;
  --galaxy-cyan: #70f0ed;
  --galaxy-violet: #a98bff;
  --galaxy-pink: #ff8edc;
  --galaxy-deep: #050714;
  --galaxy-line: rgba(148, 183, 255, .17);
  background: var(--galaxy-deep);
}

html.galaxy body {
  background: radial-gradient(60% 52% at 50% 18%, rgba(54,78,178,.18), transparent 70%), var(--galaxy-deep);
  color: var(--galaxy-muted);
}

html.galaxy body::before {
  background:
    radial-gradient(38% 30% at 82% 4%, rgba(121,91,255,.34), transparent 72%),
    radial-gradient(36% 34% at 8% 36%, rgba(38,191,255,.23), transparent 72%),
    radial-gradient(43% 32% at 72% 94%, rgba(255,71,198,.16), transparent 72%),
    radial-gradient(32% 28% at 34% 68%, rgba(58,93,255,.15), transparent 70%);
  filter: blur(18px) saturate(1.2);
  animation: galaxy-nebula 34s ease-in-out infinite alternate;
}

html.galaxy body::after {
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.92) 0 1px, transparent 1.7px),
    radial-gradient(circle at 74% 12%, rgba(112,240,237,.9) 0 1px, transparent 1.8px),
    radial-gradient(circle at 42% 38%, rgba(169,139,255,.8) 0 1px, transparent 1.6px),
    radial-gradient(circle at 88% 55%, rgba(255,142,220,.8) 0 1px, transparent 1.7px),
    radial-gradient(circle at 22% 78%, rgba(255,255,255,.72) 0 1px, transparent 1.6px),
    radial-gradient(circle at 62% 88%, rgba(116,185,255,.82) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(148,183,255,.23) 0 1px, transparent 1.4px);
  background-size: 260px 230px, 330px 280px, 390px 320px, 300px 260px, 420px 360px, 350px 300px, 82px 82px;
  background-position: 0 0, 40px 18px, 120px 70px, 10px 110px, 210px 30px, 70px 160px, 0 0;
  opacity: .72;
  -webkit-mask-image: radial-gradient(86% 82% at 50% 25%, #000 45%, transparent 100%);
  mask-image: radial-gradient(86% 82% at 50% 25%, #000 45%, transparent 100%);
  animation: galaxy-stars 42s linear infinite;
}

html.galaxy .topline {
  background: linear-gradient(90deg, #06091c, #111440 48%, #06091c);
  color: #b9c8ee;
  border-bottom: 1px solid rgba(116,185,255,.16);
  box-shadow: 0 0 28px rgba(76,90,255,.16);
}
html.galaxy .pulse { background: var(--galaxy-cyan); box-shadow: 0 0 12px var(--galaxy-cyan); }
html.galaxy .topline-right { color: #c5b9ff; }

html.galaxy header,
html.galaxy .header {
  background: rgba(5,7,20,.70);
  border-bottom-color: rgba(148,183,255,.12);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
html.galaxy .brand, html.galaxy .brand * { color: var(--galaxy-ink); }
html.galaxy .brand-sub { color: #8ea7cf; }
html.galaxy .logo {
  border-color: var(--galaxy-cyan);
  box-shadow: 0 0 0 3px rgba(112,240,237,.08), 0 0 24px rgba(112,240,237,.34);
  animation: galaxy-logo 7s ease-in-out infinite;
}
html.galaxy .logo i { background: linear-gradient(135deg, var(--galaxy-cyan), var(--galaxy-violet)); }
html.galaxy .header nav a { color: #b8c9e5; }
html.galaxy .header nav a:hover, html.galaxy .header nav a[aria-current] { color: var(--galaxy-cyan); }
html.galaxy .header-cta {
  background: linear-gradient(135deg, rgba(116,185,255,.22), rgba(169,139,255,.25));
  border: 1px solid rgba(112,240,237,.38);
  box-shadow: 0 0 22px rgba(116,185,255,.18);
}

html.galaxy .hero,
html.galaxy .dark-section,
html.galaxy .page-hero.dark {
  background:
    radial-gradient(70% 90% at 80% 0%, rgba(93,68,224,.30), transparent 70%),
    radial-gradient(55% 80% at 0% 100%, rgba(20,161,213,.18), transparent 70%),
    linear-gradient(135deg, #070b22, #0a122b 48%, #100b28);
}
html.galaxy .hero::before { background: radial-gradient(circle, rgba(112,240,237,.18), transparent 64%); filter: blur(4px); }
html.galaxy .hero h1 em {
  background: linear-gradient(100deg, #8ff7f4, #c4b0ff 45%, #ffb3e8 75%, #8ff7f4);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  /* The readability scrim's dark text-shadow (main/.footer below) is painted over background-clipped
     text in Chromium and turned this gradient a muddy mauve. A drop-shadow filter keeps the separation
     from the starfield without darkening the letters themselves. */
  text-shadow: none !important;
  filter: drop-shadow(0 1px 2px rgba(3,5,16,.7));
}
html.galaxy .hero .eyebrow, html.galaxy .eyebrow { color: var(--galaxy-cyan); }
html.galaxy .hero p { color: #c3d0e8; }

html.galaxy .signal-card {
  position: relative;
  overflow: visible;
  isolation: isolate;
  background: linear-gradient(145deg, rgba(15,27,65,.94), rgba(8,14,34,.94));
  border-color: rgba(112,240,237,.30);
  box-shadow: 0 34px 100px rgba(0,0,0,.58), 0 0 0 1px rgba(169,139,255,.18), 0 0 90px rgba(87,99,255,.18);
}
html.galaxy .signal-card::before, html.galaxy .signal-card::after {
  content: "";
  position: absolute;
  inset: -16px;
  border: 1px solid rgba(112,240,237,.24);
  border-radius: 30px;
  pointer-events: none;
  z-index: -1;
  animation: galaxy-orbit 10s linear infinite;
}
html.galaxy .signal-card::after {
  inset: -29px;
  border-color: rgba(169,139,255,.18);
  transform: rotate(52deg);
  animation-duration: 16s;
  animation-direction: reverse;
}
html.galaxy .signal-head {
  position: relative;
  padding-bottom: 39px;
  background-color: rgba(10,22,50,.86) !important;
}
html.galaxy .signal-head::before {
  content: "";
  position: absolute;
  left: 22px;
  bottom: 15px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--galaxy-cyan);
  box-shadow: 0 0 0 4px rgba(112,240,237,.10), 0 0 18px rgba(112,240,237,.86);
  animation: galaxy-engine-pulse 2.8s ease-in-out infinite;
}
html.galaxy .galaxy-engine-label {
  position: absolute;
  left: 37px;
  bottom: 10px;
  color: #9df7f2;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .12em;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 0 12px rgba(112,240,237,.52);
  animation: galaxy-engine-label 6s ease-in-out infinite;
}
html.galaxy .signal-left { background-color: rgba(10,22,50,.86) !important; }
html.galaxy .signal-card .trace-point.ai-live {
  background: linear-gradient(90deg, rgba(112,240,237,.16), transparent 85%);
  box-shadow: inset 3px 0 0 var(--galaxy-cyan), 0 0 24px rgba(112,240,237,.12);
}
html.galaxy .signal-card .trace-point:before { background: var(--galaxy-cyan); border-color: #18385d; }

/* Keep the same cloud-engine visual language inside the authenticated workspace. */
html.galaxy .dashboard-header {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 16px 18px;
  border: 1px solid rgba(112,240,237,.22);
  border-radius: 18px;
  background:
    radial-gradient(42% 170% at 8% 0%, rgba(112,240,237,.14), transparent 72%),
    linear-gradient(120deg, rgba(14,27,63,.86), rgba(8,14,34,.78));
  box-shadow: 0 18px 48px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.05);
}
html.galaxy .dashboard-header::before {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  right: -74px;
  top: -118px;
  border: 1px solid rgba(112,240,237,.28);
  border-radius: 50%;
  box-shadow: 0 0 0 16px rgba(169,139,255,.06), 0 0 42px rgba(112,240,237,.16);
  animation: galaxy-engine-ring 14s linear infinite;
  pointer-events: none;
  z-index: -1;
}
html.galaxy .dashboard-header::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  right: 42px;
  top: 26px;
  border-radius: 50%;
  background: var(--galaxy-cyan);
  box-shadow: 0 0 0 5px rgba(112,240,237,.10), 0 0 26px rgba(112,240,237,.82);
  animation: galaxy-engine-pulse 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
html.galaxy .dashboard-header > * { position: relative; z-index: 1; }
html.galaxy .dashboard-header h3 { color: var(--galaxy-ink); }
html.galaxy .dashboard-header .tiny-metric { color: var(--galaxy-cyan); }

html.galaxy :is(.tile,.panel,.price-card,.workspace-card,.package-card,.choice,.case-card,.case-task-case,.connector-contract,.flow-step,.account-flow form) {
  background: linear-gradient(145deg, rgba(16,27,62,.74), rgba(8,14,34,.70));
  border-color: var(--galaxy-line);
  box-shadow: 0 18px 52px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05);
}
html.galaxy :is(.tile,.panel,.price-card,.workspace-card,.package-card,.choice):hover {
  border-color: rgba(112,240,237,.46);
  box-shadow: 0 0 0 1px rgba(112,240,237,.20), 0 24px 66px rgba(63,89,255,.22);
}
html.galaxy :is(.tag,.status-row .tag) { border-color: rgba(112,240,237,.28); color: #9df7f2; background: rgba(112,240,237,.10); }
/* style.css gives this pill a pale-mint light-theme fill; the dark theme only recoloured its text, leaving grey on mint. */
html.galaxy .package-capabilities .package-response-target { color: #9df7f2; background: rgba(112,240,237,.12); box-shadow: inset 0 0 0 1px rgba(112,240,237,.28); }
html.galaxy .btn.primary {
  /* Keep an opaque fallback so contrast tooling and high-contrast renderers
     evaluate the same bright surface as the visual gradient. */
  background: linear-gradient(135deg, #70f0ed, #74b9ff 55%, #a98bff);
  background-color: #70f0ed;
  color: #071025;
  box-shadow: 0 0 0 1px rgba(112,240,237,.48), 0 12px 32px rgba(88,141,255,.28);
}
html.galaxy .btn.primary:hover { box-shadow: 0 0 0 1px rgba(112,240,237,.75), 0 16px 46px rgba(88,141,255,.42); }
/* Same light-theme leak in the workspace dashboard: near-white decision tiles under light-grey dark-theme text. */
html.galaxy .decision-grid > div { background: linear-gradient(145deg, rgba(16,27,62,.74), rgba(8,14,34,.70)); border-color: var(--galaxy-line); }
html.galaxy .decision-grid strong { color: var(--galaxy-ink); }
html.galaxy .progress { background: rgba(148,183,255,.16); }
/* Remaining light-theme panels/chips from style.css that never got a dark variant
   (the demo's "Safe next step" box rendered near-white text on a near-white fill). */
html.galaxy .compare { background: rgba(112,240,237,.08); border-color: rgba(112,240,237,.30); }
html.galaxy .compare h4 { color: var(--galaxy-ink); }
html.galaxy .compare p { color: #c9d6ec; }
html.galaxy .risk { background: rgba(255,209,102,.14); color: #ffd98a; }
html.galaxy .risk.critical { background: rgba(255,128,112,.16); color: #ffb8ad; }
html.galaxy .risk.low { background: rgba(112,240,237,.12); color: #9df7f2; }
html.galaxy .noflow, html.galaxy .noflow p { background-color: rgba(255,209,102,.10); color: #ffe2a8; border-color: rgba(255,209,102,.30); }
html.galaxy .noflow p { background-color: transparent; }
html.galaxy .feature-table th { background: rgba(16,27,62,.95); color: var(--galaxy-ink); }
html.galaxy .progress > span, html.galaxy .analytics-bar { background: linear-gradient(90deg, var(--galaxy-cyan), var(--galaxy-blue), var(--galaxy-violet)); }
html.galaxy .footer { background: linear-gradient(180deg, #060916, #03040d); border-top-color: rgba(148,183,255,.14); }

@keyframes galaxy-nebula { 0% { transform: translate3d(-2%,1%,0) scale(1); } 100% { transform: translate3d(3%,-2%,0) scale(1.10); } }
@keyframes galaxy-stars { from { background-position: 0 0,40px 18px,120px 70px,10px 110px,210px 30px,70px 160px,0 0; } to { background-position: 140px 90px,-80px 130px,20px -90px,150px 20px,-90px 180px,210px -100px,82px 82px; } }
@keyframes galaxy-logo { 50% { transform: rotate(4deg) scale(1.05); box-shadow: 0 0 0 4px rgba(112,240,237,.10), 0 0 34px rgba(169,139,255,.46); } }
@keyframes galaxy-orbit { to { transform: rotate(360deg); } }
@keyframes galaxy-engine-ring { to { transform: rotate(360deg); } }
@keyframes galaxy-engine-pulse { 0%,100% { opacity: .55; transform: scale(.86); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes galaxy-engine-label { 0%,100% { opacity: .68; letter-spacing: .10em; } 50% { opacity: 1; letter-spacing: .14em; } }

html.galaxy.ai-calm body::before, html.galaxy.ai-calm body::after,
html.galaxy.ai-calm .logo, html.galaxy.ai-calm .signal-card::before,
html.galaxy.ai-calm .signal-card::after, html.galaxy.ai-calm .dashboard-header::before,
html.galaxy.ai-calm .dashboard-header::after, html.galaxy.ai-calm .signal-head::before,
html.galaxy.ai-calm .galaxy-engine-label { animation: none; }
@media (prefers-reduced-motion: reduce) {
  html.galaxy:not(.ai-motion-on) body::before, html.galaxy:not(.ai-motion-on) body::after,
  html.galaxy:not(.ai-motion-on) .logo, html.galaxy:not(.ai-motion-on) .signal-card::before,
  html.galaxy:not(.ai-motion-on) .signal-card::after, html.galaxy:not(.ai-motion-on) .dashboard-header::before,
  html.galaxy:not(.ai-motion-on) .dashboard-header::after, html.galaxy:not(.ai-motion-on) .signal-head::before,
  html.galaxy:not(.ai-motion-on) .galaxy-engine-label { animation: none; }
}
@media (max-width: 760px) {
  html.galaxy .signal-card::before, html.galaxy .signal-card::after { display: none; }
  html.galaxy .signal-head { padding-bottom: 38px; }
  html.galaxy .galaxy-engine-label { font-size: 7px; letter-spacing: .08em; }
}

/* galaxy-fx: animated canvas backdrop + readability scrim so text never competes with stars */
canvas.galaxy-fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
html.galaxy main, html.galaxy .footer { text-shadow: 0 1px 2px rgba(3,5,16,.75); }
html.galaxy main .wrap { position: relative; }
html.galaxy main .wrap::before { content: ""; position: absolute; inset: -12px -18px; z-index: -1; border-radius: 22px;
  background: radial-gradient(ellipse at center, rgba(5,7,20,.62), rgba(5,7,20,.38) 70%, transparent); pointer-events: none; }
html.galaxy .card, html.galaxy .signal-card { background-color: rgba(8,11,30,.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html.galaxy p, html.galaxy li { color: #c9d6ec; }
html.galaxy h1, html.galaxy h2, html.galaxy h3 { color: #f4f8ff; }
/* galaxy-fx v2: let the canvas nebula/galaxy show; keep CSS layers as faint accent */
html.galaxy body::before { opacity: .35; }
html.galaxy body::after { opacity: .35; }

/* galaxy-fx v3: section/hero fills become translucent so the canvas galaxy shows through; scrim keeps text readable */
html.galaxy .hero, html.galaxy .section, html.galaxy .dark-section, html.galaxy .proof-strip { background: transparent !important; background-image: none !important; }
html.galaxy .hero::after, html.galaxy .dark-section::after, html.galaxy .section::before { opacity: .25; }
html.galaxy .field-error { color: #ffb8ad; }
html.galaxy :is(.input,.select)[aria-invalid=true] { border-color: #ff8a7a; box-shadow: 0 0 0 1px #ff8a7a; }
html.galaxy .form-error-summary { background: rgba(255,128,112,.14); border-color: rgba(255,138,122,.55); color: #ffd3cc; }