:root{--bg:#F7F9FB;--fg:#0B1220;--muted:#5b6678;--line:rgba(11,18,32,.09);--card:#ffffff;--blue:#1E6FFF;--teal:#00C2B8}
.dark{--bg:#070B12;--fg:#E6EDF5;--muted:#8794a8;--line:rgba(230,237,245,.08);--card:#0d131e}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Vazirmatn',sans-serif;background:var(--bg);color:var(--fg);transition:background .3s,color .3s}
.mono{font-family:'JetBrains Mono',monospace}
.grid-bg{background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:32px 32px}
.card{background:var(--card);border:1px solid var(--line);border-radius:6px}
.muted{color:var(--muted)}
.accent-grad{background:linear-gradient(90deg,var(--blue),var(--teal))}
.text-grad{background:linear-gradient(90deg,var(--blue),var(--teal));-webkit-background-clip:text;color:transparent}
.btn{padding:.6rem 1.1rem;border-radius:5px;font-weight:700;transition:transform .2s,box-shadow .2s;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn-p{background:linear-gradient(90deg,var(--blue),var(--teal));color:#fff;box-shadow:0 6px 20px -8px var(--blue)}
.btn-o{border:1px solid var(--line);color:var(--fg)}
.btn-o:hover{border-color:var(--teal)}
.inp{width:100%;background:transparent;border:1px solid var(--line);border-radius:4px;padding:.5rem .7rem;color:var(--fg);outline:none;font-family:inherit}
.inp:focus{border-color:var(--blue)}
select.inp option{background:var(--card);color:var(--fg)}
.lift{transition:transform .25s,border-color .25s}
.lift:hover{transform:translateY(-2px);border-color:var(--teal)}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s,transform .7s}
.reveal.on{opacity:1;transform:none}
@keyframes draw{to{stroke-dashoffset:0}}
.draw{stroke-dasharray:900;stroke-dashoffset:900;animation:draw 3s ease forwards}
@keyframes spin{to{transform:rotate(360deg)}}
.spin{animation:spin 40s linear infinite;transform-origin:center}
.locked{filter:blur(4px);pointer-events:none;user-select:none}
.fadein{animation:fi .35s ease}
@keyframes fi{from{opacity:0;transform:translateY(8px)}}
input[type=checkbox]{accent-color:var(--teal)}