:root{--y:#FFB800;--o:#FF6B00;--bg:#111;--card:#1c1c1c;--line:#2e2e2e;--tx:#eee;--mut:#999}
.light{--bg:#f2f0eb;--card:#fff;--line:#ddd;--tx:#1a1a1a;--mut:#666}
*{font-family:Vazirmatn,sans-serif}
body{margin:0;background:var(--bg);color:var(--tx)}
.app{background:var(--bg);color:var(--tx);min-height:100vh;background-image:linear-gradient(rgba(255,184,0,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,184,0,.03) 1px,transparent 1px);background-size:32px 32px}
.hazard{height:8px;background:repeating-linear-gradient(45deg,var(--y) 0 14px,#111 14px 28px)}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;transition:.25s}
.card:hover{border-color:var(--y);box-shadow:0 0 0 1px var(--y),0 10px 30px -10px rgba(255,184,0,.35);transform:translateY(-3px)}
.panel{background:var(--card);border:1px solid var(--line)}
.btn{background:var(--y);color:#111;font-weight:800;border-radius:10px;transition:.2s}
.btn:hover{background:var(--o);color:#fff}
.ghost{border:1px solid var(--line);border-radius:10px}
.ghost:hover{border-color:var(--y);color:var(--y)}
.inp{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.55rem .8rem;color:var(--tx);outline:none;width:100%}
.inp:focus{border-color:var(--y)}
.mut{color:var(--mut)}
.y{color:var(--y)}
.fade{animation:fade .6s both}
@keyframes fade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.pulse{animation:pulse .5s}
@keyframes pulse{50%{transform:scale(1.4)}}
.fly{position:fixed;z-index:100;pointer-events:none;transition:all .8s cubic-bezier(.5,-.3,.7,1);font-size:28px}
.bolt{position:fixed;top:-20px;z-index:200;animation:fall 2.5s linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
.noscroll::-webkit-scrollbar{display:none}
input[type=range]{accent-color:var(--y)}
.hero-img{background-size:cover;background-position:center}