/* Cosmic theme with animated gradients, glass surfaces, hover/post-click effects */

/* CSS Custom Props & Color System */
:root {
  --sidebar-width: 270px;
  --space-bg-1: #050510;
  --space-bg-2: #0c0630;
  --space-bg-3: #160a4a;
  --space-nebula-1: #6b5cff;
  --space-nebula-2: #ff7de9;
  --space-nebula-3: #00ffd5;
  --glass-bg: rgba(255,255,255,.06);
  --glass-brd: rgba(255,255,255,.2);
  --text: #e8ecff;
  --muted: #b7c0ff;
  --accent: #a7ffea;
  --warning: #ffd166;

  /* Ripple */
  --ripple-x: 50%;
  --ripple-y: 50%;
  --ripple-color: rgba(255,255,255,.45);
}

@property --h {
  syntax: "<number>";
  inherits: true;
  initial-value: 240;
}

/* Layout */
html, body { height: 100%; color: var(--text); background: var(--space-bg-1); }
body { overflow-x: hidden; }

.app-layout {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
}

/* Cosmic animated background (subtle) */
.cosmic-bg {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(60vmax 60vmax at 10% 10%, color-mix(in oklab, var(--space-nebula-1) 40%, transparent), transparent 70%),
    radial-gradient(70vmax 70vmax at 90% 20%, color-mix(in oklab, var(--space-nebula-2) 45%, transparent), transparent 70%),
    radial-gradient(50vmax 50vmax at 40% 80%, color-mix(in oklab, var(--space-nebula-3) 40%, transparent), transparent 70%),
    conic-gradient(from calc(var(--h,240) * 1deg), #06061a, #090922, #0a0a1f, #06061a);
  animation: hueShift 22s linear infinite alternate;
}

@keyframes hueShift {
  to { --h: 420; }
}

/* Glassmorphism surfaces */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--glass-brd);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Sidebar */
.app-sidebar {
  display: flex; flex-direction: column;
}
.app-sidebar .navbar-brand {
  color: var(--text);
  letter-spacing: .3px;
}
.logo-planet {
  width: 28px; height: 28px; display:inline-block; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, #ffd399 15%, #ff9c5b 30%, #c24cff 65%, #4318ff 100%);
  box-shadow: 0 0 20px rgba(103,73,255,.4), inset -6px -6px 18px rgba(0,0,0,.35);
  position: relative;
}
.logo-planet::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.15);
  filter: blur(2px);
}

.app-sidebar .nav-link {
  border-radius: .75rem;
  color: var(--muted);
  margin: .1rem .25rem;
  transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
  position: relative;
}
.app-sidebar .nav-link:hover {
  background: rgba(255,255,255,.08);
  color: var(--text);
  transform: translateX(2px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.app-sidebar .nav-link.active {
  background: linear-gradient(135deg, rgba(100,59,255,.25), rgba(0,255,213,.18));
  color: var(--text);
  box-shadow: 0 10px 24px rgba(67,24,255,.18);
}

/* Main */
.app-main { background: transparent; }

.app-topbar {
  color: var(--text);
  min-height: 64px;
}

.app-topbar .search-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .8;
}

.cosmic-input {
  color: var(--text);
  background: rgba(0,0,0,.25);
  border-color: rgba(255,255,255,.2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.cosmic-input::placeholder { color: color-mix(in oklab, var(--muted) 70%, white 0%); }
.cosmic-input:focus {
  color: var(--text);
  background: rgba(0,0,0,.35);
  box-shadow: 0 0 0 .25rem rgba(99,102,241,.25);
  border-color: rgba(140, 100, 255, .75);
}

/* Cards */
.card-surface {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  border-radius: 1rem;
}

/* Pre block */
pre.pretty {
  white-space: pre-wrap;
  word-break: break-word;
  background: rgba(255,255,255,.04);
  border: 1px dashed rgba(255,255,255,.15);
  border-radius: .75rem;
  padding: 1rem;
  color: var(--text);
}

/* Variable editor rows */
.variable-row {
  position: relative;
  padding: 1rem;
  border-radius: .75rem;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.variable-row:hover {
  transform: translateY(-2px);
  border-color: rgba(167,255,234,.45);
  box-shadow: 0 8px 22px rgba(0,0,0,.40);
}
.variable-row:has(input:focus, select:focus) {
  border-color: rgba(167,255,234,.8);
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
}

/* Buttons (cosmic) */
.cosmic-btn {
  --btn-grad: linear-gradient(135deg, rgba(167,255,234,.15), rgba(103,73,255,.25));
  background: var(--btn-grad);
  border: 1px solid rgba(255,255,255,.2);
  color: var(--text);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.cosmic-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(67,24,255,.22);
  filter: brightness(1.08);
}
.cosmic-btn:active {
  transform: translateY(1px) scale(.98);
}

/* Ripple effect (requires [data-ripple]) */
[data-ripple] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
[data-ripple]::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  left: var(--ripple-x); top: var(--ripple-y);
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  background: var(--ripple-color);
  pointer-events: none;
  animation: none;
}
[data-ripple].rippling::after {
  animation: ripple .6s ease-out forwards;
}
@keyframes ripple {
  to { transform: translate(-50%, -50%) scale(20); opacity: 0; }
}

/* Falling stars in topbar */
.falling-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.star {
  position: absolute;
  top: -8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, #ffd466 40%, rgba(255,255,255,.3));
  box-shadow: 0 0 12px #fff7, 0 0 24px #ffd46666;
  animation: fall var(--dur, 2.8s) linear forwards, spin var(--s, 1.2s) linear infinite;
  will-change: transform, opacity;
  opacity: .95;
}
.star::after {
  content: "";
  position: absolute;
  left: -14px; top: 2px;
  width: 14px; height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,.8), rgba(255,255,255,0));
  border-radius: 2px;
  filter: blur(1px);
}
@keyframes fall {
  to { transform: translateY(120%); opacity: 0; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Skeleton */
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.07) 25%, rgba(255,255,255,0.16) 37%, rgba(255,255,255,0.07) 63%);
  animation: shimmer 1.4s infinite;
  background-size: 400% 100%;
  border-radius: .5rem;
  min-height: 1.25rem;
}
@keyframes shimmer { 0% {background-position: 100% 0;} 100% {background-position: 0 0;} }

.badge-chip { font-weight: 600; }

/* Responsive Sidebar */
@media (max-width: 992px) {
  :root { --sidebar-width: 78px; }
  .app-sidebar .navbar-brand strong { display: none; }
  .app-sidebar .nav-link { text-align: center; }
  .app-sidebar .nav-link .bi { margin-right: 0 !important; }
  .app-sidebar .nav-link span { display: none; }
}

/* Utilities */
.text-gradient {
  background: linear-gradient(90deg, #fff, #a7ffea, #e5d1ff);
  -webkit-background-clip: text; background-clip:text; color: transparent;
}
.space-form .form-text { color: var(--muted); }