.grad-bg { background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 45%, #fed7aa 100%); }
.grad-amber { background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%); }
.grad-rose { background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%); }
.grad-violet { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); }
.grad-blue { background: linear-gradient(135deg, #3b82f6 0%, #4f46e5 100%); }
.grad-slate { background: linear-gradient(135deg, #334155 0%, #0f172a 100%); }
.grad-emerald { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }

.scroll-smooth { scroll-behavior: smooth; }

.device-frame {
  background: linear-gradient(180deg, #1f2937 0%, #0f172a 100%);
  border-radius: 36px;
  padding: 10px;
  box-shadow: 0 30px 60px -20px rgba(15,23,42,.35), 0 0 0 2px rgba(255,255,255,.05) inset;
}
.device-screen { background: #fff; border-radius: 26px; overflow: hidden; }

.album-card {
  background: linear-gradient(135deg, var(--c1,#fef3c7), var(--c2,#fed7aa));
  aspect-ratio: 16/10;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.album-card::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(255,255,255,.55), transparent 55%);
}

.kbd {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(15,23,42,.08);
  color: #334155;
}

.coin-fly {
  animation: coin-fly 1.4s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes coin-fly {
  0% { transform: translateY(0) scale(.6); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-180px) scale(1.4) rotate(20deg); opacity: 0; }
}

.toast-in { animation: toast-in .3s ease-out; }
@keyframes toast-in {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.skeleton {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: skeleton 1.4s linear infinite;
}
@keyframes skeleton {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.live-dot {
  width: 8px; height: 8px; background: #ef4444; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(239,68,68,.6);
  animation: live 1.6s infinite;
}
@keyframes live {
  0% { box-shadow: 0 0 0 0 rgba(239,68,68,.6); }
  70% { box-shadow: 0 0 0 12px rgba(239,68,68,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}

.hide-scroll::-webkit-scrollbar { display: none; }
.hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }