:root{--gold:#d4af37;--turq:#1abc9c;--bg:#0d1422;--panel:#151f33;--panel2:#1c2942;--parch:#f1e4c3;--ink:#3b2a14;}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:#e8e2d0;font-family:'Vazirmatn',sans-serif;}
body{background-image:radial-gradient(circle at 20% 10%,rgba(212,175,55,.08),transparent 40%),radial-gradient(circle at 80% 90%,rgba(26,188,156,.07),transparent 40%),repeating-linear-gradient(45deg,rgba(255,255,255,.012) 0 2px,transparent 2px 14px);min-height:100vh}
.panel{background:linear-gradient(160deg,var(--panel),var(--panel2));border:1px solid rgba(212,175,55,.22);border-radius:14px}
.gold{color:var(--gold)}.turq{color:var(--turq)}
.btn{background:linear-gradient(180deg,#e2c25a,#b8922a);color:#1a1205;font-weight:700;border-radius:10px;padding:.45rem .9rem;transition:.15s;border:none;cursor:pointer}
.btn:hover{filter:brightness(1.12);transform:translateY(-1px)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn2{background:rgba(26,188,156,.12);color:#bff3e6;border:1px solid rgba(26,188,156,.45);border-radius:10px;padding:.4rem .8rem;transition:.15s;cursor:pointer}
.btn2:hover{background:rgba(26,188,156,.25)}
.btn2:disabled{opacity:.35;cursor:not-allowed}
.btnr{background:rgba(220,60,60,.15);color:#ffb7b7;border:1px solid rgba(220,60,60,.5);border-radius:10px;padding:.4rem .8rem;cursor:pointer}
.btnr:hover{background:rgba(220,60,60,.3)}
.chip{background:rgba(0,0,0,.3);border:1px solid rgba(212,175,55,.2);border-radius:999px;padding:.15rem .6rem;font-size:.8rem;white-space:nowrap}
.parch{background:linear-gradient(135deg,#f6ead0,#e6d3a5);color:var(--ink);border:3px double #8a6a2a;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.title-glow{text-shadow:0 0 30px rgba(212,175,55,.6),0 0 2px #fff}
.glow{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{stroke-opacity:1;stroke-width:3}50%{stroke-opacity:.4;stroke-width:6}}
.fadein{animation:fadein .5s ease both}
@keyframes fadein{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.toast{animation:slidein .35s ease both}
@keyframes slidein{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
.shake{animation:shake .5s ease 3}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
input[type=range]{accent-color:var(--gold);width:100%}
.scroll::-webkit-scrollbar{width:6px}.scroll::-webkit-scrollbar-thumb{background:rgba(212,175,55,.3);border-radius:3px}
.tab{transition:.15s}.tab.active{background:linear-gradient(90deg,rgba(212,175,55,.25),transparent);color:var(--gold);border-right:3px solid var(--gold)}
.sel{outline:2px solid var(--gold);box-shadow:0 0 18px rgba(212,175,55,.4)}
.prov{transition:fill-opacity .2s;cursor:pointer}.prov:hover{fill-opacity:.95}
@media(max-width:767px){.tab.active{border-right:none;border-top:3px solid var(--gold)}}