:root {
  --cyan: #16e7ff;
  --magenta: #f45cff;
  --violet: #7f5cff;
  --accent: #08bff2;
  --accent-strong: #5ae9ff;
  --accent-soft: rgba(22, 231, 255, 0.14);
  --holo-amber: #ff9f43;
  --holo-deep: #050812;
  --glass: rgba(10, 20, 34, 0.2);
  --glass-strong: rgba(255, 255, 255, 0.72);
  --holo-line: rgba(22, 231, 255, 0.32);
  --specular: rgba(255, 255, 255, 0.7);
}

:root[data-theme="dark"] {
  --bg: #03050b;
  --surface: #0b101d;
  --surface-soft: #121827;
  --surface-muted: #1b2132;
  --accent: #16e7ff;
  --accent-strong: #8cf4ff;
  --accent-soft: rgba(22, 231, 255, 0.16);
  --cyan: #16e7ff;
  --magenta: #f45cff;
  --violet: #8b68ff;
  --holo-line: rgba(22, 231, 255, 0.28);
  --glass: rgba(8, 14, 28, 0.58);
  --glass-strong: rgba(18, 27, 46, 0.78);
  --specular: rgba(190, 250, 255, 0.32);
}

body {
  background:
    radial-gradient(circle at 16% 14%, rgba(22, 231, 255, 0.18), transparent 28%),
    radial-gradient(circle at 86% 20%, rgba(244, 92, 255, 0.14), transparent 30%),
    radial-gradient(circle at 64% 88%, rgba(127, 92, 255, 0.14), transparent 36%),
    linear-gradient(130deg, #03050b 0%, #08111f 46%, #11091c 100%);
}

body::before {
  background:
    linear-gradient(90deg, transparent 0 63px, rgba(22, 231, 255, 0.18) 64px 65px, transparent 66px),
    linear-gradient(180deg, transparent 0 63px, rgba(244, 92, 255, 0.11) 64px 65px, transparent 66px),
    linear-gradient(116deg, transparent 0 44%, rgba(255, 255, 255, 0.12) 50%, transparent 56%);
  background-size: 128px 128px, 128px 128px, 100% 100%;
  opacity: 0.52;
}

body::after {
  background:
    linear-gradient(102deg, transparent 8%, rgba(22, 231, 255, 0.22) 28%, transparent 52%),
    linear-gradient(258deg, transparent 15%, rgba(244, 92, 255, 0.2) 42%, transparent 72%),
    linear-gradient(180deg, transparent 0%, rgba(22, 231, 255, 0.08) 100%);
  opacity: 0.72;
}

.login-panel,
.sidebar,
.status-band,
.stage-actions,
.timeline,
.details {
  border-color: color-mix(in srgb, var(--cyan) 30%, var(--line));
  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 0 34px rgba(22, 231, 255, 0.08);
}

.login-panel,
.sidebar,
.status-band,
.stage-actions,
.details {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(22, 231, 255, 0.045) 34%, rgba(244, 92, 255, 0.045) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--glass-strong) 74%, transparent), color-mix(in srgb, var(--glass) 64%, transparent));
}

.brand-block {
  background:
    radial-gradient(circle at 28% 28%, rgba(22, 231, 255, 0.22), transparent 30%),
    radial-gradient(circle at 82% 72%, rgba(244, 92, 255, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(12, 18, 34, 0.38)),
    linear-gradient(180deg, color-mix(in srgb, var(--glass-strong) 72%, transparent), color-mix(in srgb, var(--glass) 62%, transparent));
}

.brand-block::after {
  content: "";
  position: absolute;
  right: -120px;
  top: 18%;
  width: 410px;
  height: 410px;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 48%, rgba(22, 231, 255, 0.46) 49% 50%, transparent 51% 58%, rgba(244, 92, 255, 0.3) 59% 60%, transparent 61%),
    conic-gradient(from 24deg, transparent 0 16%, rgba(22, 231, 255, 0.34) 17% 18%, transparent 19% 42%, rgba(244, 92, 255, 0.28) 43% 45%, transparent 46% 100%);
  filter: drop-shadow(0 0 36px rgba(22, 231, 255, 0.22));
  opacity: 0.88;
  pointer-events: none;
}

.brand-copy,
.brand-row {
  position: relative;
  z-index: 2;
}

.brand-mark.small,
button {
  background:
    linear-gradient(135deg, rgba(22, 231, 255, 0.96), rgba(127, 92, 255, 0.78) 58%, rgba(244, 92, 255, 0.72));
  box-shadow:
    0 14px 34px rgba(22, 231, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.timeline {
  background:
    radial-gradient(circle at 18% 26%, rgba(22, 231, 255, 0.22), transparent 32%),
    radial-gradient(circle at 76% 34%, rgba(244, 92, 255, 0.18), transparent 30%),
    linear-gradient(90deg, rgba(22, 231, 255, 0.08), transparent 36%, rgba(244, 92, 255, 0.1)),
    linear-gradient(145deg, #03050b 0%, #08111f 48%, #14071d 100%);
}

.timeline-map::before,
.timeline-map::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.timeline-map::before {
  left: 48px;
  top: 58px;
  width: 390px;
  height: 390px;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 42%, rgba(22, 231, 255, 0.32) 43% 44%, transparent 45% 55%, rgba(244, 92, 255, 0.26) 56% 57%, transparent 58%),
    conic-gradient(from 10deg, rgba(22, 231, 255, 0.34), transparent 13%, transparent 38%, rgba(244, 92, 255, 0.32) 41%, transparent 44%, transparent 70%, rgba(255, 159, 67, 0.18) 73%, transparent 76%);
  opacity: 0.72;
  filter: blur(0.1px) drop-shadow(0 0 32px rgba(22, 231, 255, 0.2));
}

.timeline-map::after {
  right: 34px;
  top: 74px;
  width: 170px;
  height: 480px;
  border: 1px solid rgba(244, 92, 255, 0.34);
  border-left-color: rgba(22, 231, 255, 0.28);
  box-shadow:
    0 0 28px rgba(244, 92, 255, 0.18),
    inset 0 0 28px rgba(22, 231, 255, 0.08);
  transform: perspective(520px) rotateY(-18deg);
  opacity: 0.62;
}

.timeline-backdrop {
  opacity: 0.62;
  background-image:
    linear-gradient(90deg, transparent 0 55px, rgba(22, 231, 255, 0.2) 56px 57px, transparent 58px),
    linear-gradient(180deg, transparent 0 55px, rgba(244, 92, 255, 0.12) 56px 57px, transparent 58px),
    radial-gradient(circle, rgba(22, 231, 255, 0.44) 0 1px, transparent 1.6px);
  background-size: 112px 112px, 112px 112px, 76px 76px;
}

.timeline-flow::before,
.timeline-flow::after {
  background: linear-gradient(90deg, rgba(22, 231, 255, 0.95), rgba(127, 92, 255, 0.82), rgba(244, 92, 255, 0.9), rgba(255, 159, 67, 0.52));
  box-shadow:
    0 0 20px rgba(22, 231, 255, 0.5),
    0 0 36px rgba(244, 92, 255, 0.22);
}

.node-core {
  box-shadow:
    0 0 0 8px color-mix(in srgb, var(--node-color) 13%, transparent),
    0 0 38px color-mix(in srgb, var(--node-color) 58%, transparent),
    inset 0 0 18px rgba(255, 255, 255, 0.3);
}

.node-card {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(3, 8, 18, 0.7)),
    linear-gradient(90deg, rgba(22, 231, 255, 0.08), rgba(244, 92, 255, 0.08));
  border-color: color-mix(in srgb, var(--node-color) 42%, rgba(255, 255, 255, 0.13));
}

.details,
.canvas-hero,
.canvas-grid section,
.ai-canvas details {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(22, 231, 255, 0.045) 42%, rgba(244, 92, 255, 0.045)),
    linear-gradient(180deg, color-mix(in srgb, var(--glass-strong) 72%, transparent), color-mix(in srgb, var(--glass) 58%, transparent));
}

.canvas-hero {
  border-color: color-mix(in srgb, var(--cyan) 28%, var(--line));
}

.canvas-chip {
  background: linear-gradient(135deg, rgba(22, 231, 255, 0.18), rgba(244, 92, 255, 0.12));
  color: color-mix(in srgb, var(--cyan) 78%, var(--ink));
}

@media (max-width: 760px) {
  .timeline-map::before {
    left: -96px;
    top: 92px;
    width: 330px;
    height: 330px;
  }

  .timeline-map::after {
    display: none;
  }
}