:root {
  --gold: #f5c518;
  --gold-2: #d4af37;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 15% 10%, rgba(245,197,24,0.08), transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(212,175,55,0.06), transparent 45%),
    #08080c;
  min-height: 100vh;
}

.gold-text {
  background: linear-gradient(120deg, #fff2b0, var(--gold) 40%, var(--gold-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gold-bg {
  background: linear-gradient(120deg, #ffe27a, var(--gold) 55%, var(--gold-2));
}

.gold-border {
  border: 1px solid rgba(245,197,24,0.22);
  box-shadow: 0 0 0 1px rgba(245,197,24,0.04), 0 8px 30px rgba(0,0,0,0.5);
}

.gold-border:hover {
  border-color: rgba(245,197,24,0.4);
}

/* scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0d0d14; }
::-webkit-scrollbar-thumb { background: rgba(245,197,24,0.3); border-radius: 4px; }

input[type="range"] { height: 6px; border-radius: 4px; }

/* page fade-in */
#root { animation: fade 0.5s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }