:root{--bg:#0b1224;--bg2:#0f172a;--gold:#d4a843;--gold2:#f1d48a;--tq:#14b8a6;--red:#dc2626;--ink:#e8e2d0;--mut:#8b93a7}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:'Vazirmatn',sans-serif}
body{background:
 radial-gradient(ellipse at 80% -10%,rgba(212,168,67,.12),transparent 50%),
 radial-gradient(ellipse at 0% 110%,rgba(20,184,166,.10),transparent 50%),
 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 0L60 30L30 60L0 30Z' fill='none' stroke='%23d4a843' stroke-opacity='.05'/%3E%3Ccircle cx='30' cy='30' r='8' fill='none' stroke='%23d4a843' stroke-opacity='.05'/%3E%3C/svg%3E"),var(--bg);min-height:100vh}
.card{background:linear-gradient(160deg,rgba(30,41,70,.75),rgba(15,23,42,.75));border:1px solid rgba(212,168,67,.22);border-radius:14px;backdrop-filter:blur(6px);box-shadow:0 8px 30px rgba(0,0,0,.35)}
.card-h{font-weight:900;color:var(--gold2);display:flex;align-items:center;gap:.5rem;margin-bottom:.6rem;font-size:1.02rem}
.card-h::after{content:"";flex:1;height:1px;background:linear-gradient(to left,transparent,rgba(212,168,67,.4))}
.btn{padding:.38rem .8rem;border-radius:9px;border:1px solid rgba(212,168,67,.35);background:rgba(212,168,67,.08);color:var(--ink);font-size:.82rem;transition:.15s;cursor:pointer;white-space:nowrap}
.btn:hover:not(:disabled){background:rgba(212,168,67,.22);border-color:var(--gold)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn-gold{background:linear-gradient(180deg,#e5bd5c,#b98a26);color:#1a1205;font-weight:700;border-color:#f1d48a}
.btn-gold:hover:not(:disabled){filter:brightness(1.1);background:linear-gradient(180deg,#e5bd5c,#b98a26)}
.btn-red{border-color:rgba(220,38,38,.6);background:rgba(220,38,38,.15)}
.btn-red:hover:not(:disabled){background:rgba(220,38,38,.35)!important;border-color:#dc2626!important}
.btn-tq{border-color:rgba(20,184,166,.6);background:rgba(20,184,166,.13)}
.btn.on{background:var(--gold);color:#1a1205;font-weight:700}
.bar{height:7px;border-radius:9px;background:rgba(255,255,255,.08);overflow:hidden}
.bar>div{height:100%;border-radius:9px;transition:width .3s}
.mut{color:var(--mut)}
.chip{font-size:.72rem;padding:.12rem .5rem;border-radius:99px;border:1px solid rgba(255,255,255,.15)}
.top-pattern{background:linear-gradient(180deg,rgba(8,12,26,.96),rgba(15,23,42,.9)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M20 2 L38 20 L20 38 L2 20Z M20 10 L30 20 L20 30 L10 20Z' fill='none' stroke='%23d4a843' stroke-opacity='.12'/%3E%3C/svg%3E");border-bottom:1px solid rgba(212,168,67,.3)}
input[type=range]{accent-color:var(--gold);width:100%}
input[type=text],select{background:rgba(0,0,0,.3);border:1px solid rgba(212,168,67,.3);border-radius:8px;padding:.4rem .6rem;color:var(--ink);font-family:inherit}
.navbtn{display:flex;align-items:center;gap:.6rem;padding:.6rem .8rem;border-radius:10px;width:100%;text-align:right;color:var(--mut);transition:.15s;font-weight:700}
.navbtn:hover{background:rgba(212,168,67,.08);color:var(--ink)}
.navbtn.act{background:linear-gradient(to left,rgba(212,168,67,.25),transparent);color:var(--gold2);box-shadow:inset -3px 0 0 var(--gold)}
@keyframes shake{0%,100%{transform:translate(0)}20%{transform:translate(-6px,3px)}40%{transform:translate(6px,-3px)}60%{transform:translate(-4px,2px)}80%{transform:translate(4px,-1px)}}
.shake{animation:shake .5s}
@keyframes blink{50%{opacity:.2}}
.blink{animation:blink 1s infinite}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.rise{animation:rise .4s both}
@keyframes toastIn{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
.toast{animation:toastIn .3s both}
.hex{cursor:pointer;transition:filter .15s}
.hex:hover{filter:brightness(1.3)}
.scroll-thin::-webkit-scrollbar{width:6px;height:6px}
.scroll-thin::-webkit-scrollbar-thumb{background:rgba(212,168,67,.3);border-radius:9px}
.toggle{width:42px;height:22px;border-radius:99px;background:rgba(255,255,255,.12);position:relative;transition:.2s;flex-shrink:0;cursor:pointer}
.toggle.on{background:var(--tq)}
.toggle::after{content:"";position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s}
.toggle.on::after{right:23px}
.tech{border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:.5rem;font-size:.8rem;position:relative;cursor:pointer;transition:.15s}
.tech.done{border-color:var(--tq);background:rgba(20,184,166,.12)}
.tech.av:hover{border-color:var(--gold)}
.tech.lock{opacity:.4;cursor:default}
.tech.cur{border-color:var(--gold);box-shadow:0 0 14px rgba(212,168,67,.4)}