:root {
  --bg0: #0b0b14;
  --bg1: #14142a;
  --accent1: #a855f7;
  --accent2: #22d3ee;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Bricolage Grotesque", sans-serif;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(168,85,247,0.18), transparent 60%),
    radial-gradient(1000px 500px at 100% 0%, rgba(34,211,238,0.14), transparent 55%),
    linear-gradient(160deg, var(--bg0), var(--bg1));
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.title-font { font-family: "Bricolage Grotesque", sans-serif; }
.mono { font-family: "JetBrains Mono", monospace; }

.gradient-text {
  background: linear-gradient(100deg, var(--accent1), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Equalizer */
.eq { display: flex; align-items: flex-end; gap: 3px; height: 34px; }
.eq-bar {
  width: 4px; height: 100%;
  background: linear-gradient(var(--accent2), var(--accent1));
  border-radius: 2px;
  transform-origin: bottom;
  animation: eqpulse 0.9s ease-in-out infinite alternate;
}
@keyframes eqpulse {
  0% { transform: scaleY(0.25); opacity: 0.6; }
  100% { transform: scaleY(1); opacity: 1; }
}

/* Drop zone */
.drop-zone {
  border: 2px dashed rgba(148, 163, 184, 0.35);
  border-radius: 20px;
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  transition: all 0.25s ease;
  padding: 0 1rem;
}
.drop-zone:hover:not(.has-file) {
  border-color: var(--accent2);
  box-shadow: 0 0 40px rgba(34,211,238,0.15) inset;
}
.drop-zone.drag-active {
  border-color: var(--accent1);
  background: rgba(168,85,247,0.08);
  box-shadow: 0 0 60px rgba(168,85,247,0.25);
  transform: scale(1.01);
}
.drop-zone.has-file {
  cursor: default;
  border-style: solid;
  border-color: rgba(52,211,153,0.4);
  background: rgba(52,211,153,0.04);
}

.badge {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: rgba(52,211,153,0.15);
  color: #6ee7b7;
  border: 1px solid rgba(52,211,153,0.35);
}

/* Fields */
.field {
  width: 100%;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(148,163,184,0.2);
  border-radius: 12px;
  padding: 0.65rem 0.8rem;
  color: #e2e8f0;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.85rem;
  transition: all 0.18s ease;
  outline: none;
  resize: vertical;
}
.field::placeholder { color: #475569; }
.field:focus {
  border-color: var(--accent2);
  background: rgba(34,211,238,0.05);
  box-shadow: 0 0 0 3px rgba(34,211,238,0.12);
}

/* Buttons */
.btn-primary {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  color: #0b0b14;
  background: linear-gradient(100deg, var(--accent1), var(--accent2));
  box-shadow: 0 8px 24px rgba(34,211,238,0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 12px 30px rgba(168,85,247,0.35); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 400;
  padding: 0.75rem 1.25rem;
  border-radius: 12px;
  cursor: pointer;
  color: #cbd5e1;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(148,163,184,0.2);
  transition: all 0.15s ease;
}
.btn-ghost:hover { border-color: rgba(148,163,184,0.5); background: rgba(255,255,255,0.08); }

/* Reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: reveal 0.6s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes reveal {
  to { opacity: 1; transform: translateY(0); }
}

/* Toast */
.toast { animation: toastIn 0.3s cubic-bezier(0.16,1,0.3,1); }
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Confetti */
.confetti-wrap {
  position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 40;
}
.confetti-piece {
  position: absolute; top: -12px; width: 9px; height: 9px; border-radius: 2px;
  animation: fall 1.3s ease-in forwards;
}
@keyframes fall {
  to { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

.hidden { display: none; }
</parameter>
</invoke>