:root {
  --bg: #0d0d12;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(124,92,255,0.18), transparent 60%),
    radial-gradient(1000px 500px at 90% 0%, rgba(255,77,141,0.14), transparent 55%),
    radial-gradient(900px 600px at 50% 110%, rgba(38,208,206,0.12), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  color: #fff;
  min-height: 100vh;
}

.prompt-block {
  font-family: 'JetBrains Mono', monospace;
  color: #d7d0ff;
}

.header-glow {
  background: linear-gradient(90deg, #7c5cff, #ff4d8d, #26d0ce);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% auto;
  animation: shimmer 5s linear infinite;
}
@keyframes shimmer { to { background-position: 200% center; } }

.gradient-btn {
  background: linear-gradient(100deg, #7c5cff, #ff4d8d 55%, #ff7a45);
  background-size: 180% auto;
  color: #fff;
  transition: all 0.3s ease;
  box-shadow: 0 6px 24px -8px rgba(255,77,141,0.6);
}
.gradient-btn:hover:not(:disabled) {
  background-position: right center;
  box-shadow: 0 8px 30px -6px rgba(124,92,255,0.7);
  transform: translateY(-1px);
}

.fade-swap { animation: fadeSwap 0.6s ease; }
@keyframes fadeSwap { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

.reveal { animation: reveal 0.4s ease both; }
@keyframes reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.drawer-in { animation: drawerIn 0.25s ease both; }
@keyframes drawerIn { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }

.toast-pop { animation: toastPop 0.3s cubic-bezier(0.18,0.89,0.32,1.28) both; }
@keyframes toastPop { from { opacity: 0; transform: translate(-50%, 12px) scale(0.9); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }

.loader-ring {
  width: 44px; height: 44px;
  border: 3px solid rgba(255,255,255,0.1);
  border-top-color: #ff4d8d;
  border-right-color: #7c5cff;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

#confetti-layer {
  position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden;
}
.confetti-piece {
  position: absolute; top: -14px;
  width: 9px; height: 14px; border-radius: 2px;
  animation: fall 1.8s ease-in forwards;
}
@keyframes fall {
  to { transform: translateY(105vh) rotate(540deg); opacity: 0; }
}

.line-clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

textarea, input, select { font-family: inherit; }
::selection { background: rgba(255,77,141,0.4); }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }