:root {
  --bg1: #1e0a3c;
  --bg2: #2d1259;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Vazirmatn', sans-serif;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(217, 70, 239, 0.25), transparent 60%),
    radial-gradient(900px 500px at 10% 10%, rgba(99, 102, 241, 0.25), transparent 55%),
    linear-gradient(160deg, var(--bg1), var(--bg2) 60%, #0f0524 100%);
  background-attachment: fixed;
  min-height: 100vh;
  color: #fff;
}

/* transparency checkerboard behind preview */
.checker {
  background-color: #2a2044;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.06) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.06) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,.06) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.06) 75%);
  background-size: 24px 24px;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
}

/* toast animation */
@keyframes toastPop {
  0%   { opacity: 0; transform: translate(-50%, 20px) scale(.9); }
  15%  { opacity: 1; transform: translate(-50%, 0) scale(1); }
  85%  { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, 10px) scale(.95); }
}
.toast-pop { animation: toastPop 2.2s ease forwards; }

/* smooth interactions */
button { transition: all .18s ease; }
input[type="range"] { height: 6px; border-radius: 999px; }

/* number input arrows cleanup */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { opacity: .3; }

/* nicer color input on webkit */
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 6px; }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(217,70,239,.4); border-radius: 999px; }

/* staggered load fade-in */
main > div { animation: fadeUp .5s ease both; }
main > div:nth-child(1) { animation-delay: .05s; }
main > div:nth-child(2) { animation-delay: .15s; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}