:root {
  --void: #00020a;
  --deep: #010510;
  --midnight: #020c1b;
  --navy: #040f22;
  --cobalt: #071830;
  --ice: #4fc3f7;
  --ice-bright: #81d4fa;
  --ice-dim: rgba(79,195,247,0.08);
  --ice-glow: rgba(79,195,247,0.3);
  --plasma: #0d47a1;
  --arc: #29b6f6;
  --neon: #00e5ff;
  --gold: #ffd600;
  --white: #e8f4fd;
  --muted: rgba(232,244,253,0.55);
  --subtle: rgba(232,244,253,0.18);
  --ghost: rgba(232,244,253,0.06);
  --border: rgba(79,195,247,0.12);
  --border-hi: rgba(79,195,247,0.35);
  --font-hud: 'Rajdhani', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
  --font-body: 'Exo 2', sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

.gradio-container {
  width: 380px;
  border: 1px solid var(--ice-glow);
  border-radius: 12px;
  background: rgba(1, 5, 16, 0.95);
  backdrop-filter: blur(20px);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 40px var(--ice-dim);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0;
  display: flex;
  flex-direction: column;
  animation: fadeInScale 0.6s var(--ease-out) forwards;
}

.gradio-container gradio-app {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  display: block;
}

@keyframes fadeInScale {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}