:root{--gold:#f5b041;--pom:#e74c3c}
body{font-family:'Vazirmatn',sans-serif;min-height:100vh;color:#f3eee4;
background:linear-gradient(135deg,#0f0c29,#302b63 55%,#24243e);background-attachment:fixed}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.05;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23f5b041' stroke-width='1.5'%3E%3Cpath d='M40 4l10 26 26 10-26 10-10 26-10-26L4 40l26-10z'/%3E%3Crect x='26' y='26' width='28' height='28' transform='rotate(45 40 40)'/%3E%3C/g%3E%3C/svg%3E")}
.glass{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(12px)}
.card{transition:transform .25s,box-shadow .25s,border-color .25s;animation:rise .5s both}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.35)}
.card.active{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 28px rgba(245,176,65,.35)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pop{animation:pop .35s}
@keyframes pop{50%{transform:scale(1.45)}}
.eq{display:inline-flex;gap:2px;align-items:flex-end;height:14px}
.eq i{width:3px;background:var(--gold);animation:eq .8s infinite ease-in-out}
.eq i:nth-child(2){animation-delay:.2s}.eq i:nth-child(3){animation-delay:.4s}
@keyframes eq{0%,100%{height:3px}50%{height:14px}}
.blink{animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.3}}
.spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
input[type=range]{accent-color:var(--gold)}
.chip.on{background:var(--gold);color:#1a1530;border-color:var(--gold)}
.toast{animation:rise .3s both}