:root {
  --bg: #0a0f1a;
  --panel: #0f1729;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(6, 182, 212, 0.12), transparent 60%),
    radial-gradient(700px 500px at 100% 0%, rgba(16, 185, 129, 0.08), transparent 55%),
    linear-gradient(180deg, #0a0f1a 0%, #0b1120 100%);
  background-attachment: fixed;
  min-height: 100vh;
  color: #e2e8f0;
}

.title { font-family: 'Bricolage Grotesque', sans-serif; letter-spacing: -0.03em; }

.font-mono, pre, input[type="file"] + * { font-family: 'JetBrains Mono', monospace; }
code, pre { font-family: 'JetBrains Mono', monospace; }

/* Spinning disc while working */
.disc-icon {
  display: inline-block;
  animation: none;
  font-size: 1.75rem;
}
.disc-icon { animation: spin 2.4s linear infinite; }
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Header disc shouldn't spin unless working — keep gentle wobble */
header .disc-icon { animation: wobble 4s ease-in-out infinite; }
@keyframes wobble {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(8deg); }
}

.glow {
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.25), 0 0 40px rgba(34, 211, 238, 0.25);
}

.dropzone { backdrop-filter: blur(2px); }

.convert-btn:not(:disabled):hover {
  box-shadow: 0 0 30px rgba(34, 211, 238, 0.5);
  transform: translateY(-1px);
}
.convert-btn:not(:disabled):active { transform: translateY(1px) scale(0.99); }

/* Entrance animation */
.fade-in {
  animation: fadeUp 0.5s ease both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.celebrate { animation: pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes pop {
  0% { opacity: 0; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}

input[type="range"] { cursor: pointer; }

::selection { background: rgba(34, 211, 238, 0.35); }