:root{--bg:#0b0f17;--card:#131a26;--line:#1f2a3a;--cyan:#00e5ff;}
html,body{background:var(--bg);color:#dbe4f0;font-family:'Vazirmatn',sans-serif;margin:0}
body{background-image:radial-gradient(circle at 80% -10%,rgba(0,229,255,.08),transparent 40%),radial-gradient(circle at 0% 100%,rgba(0,230,118,.05),transparent 40%),linear-gradient(rgba(31,42,58,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(31,42,58,.25) 1px,transparent 1px);background-size:auto,auto,40px 40px,40px 40px;background-attachment:fixed;min-height:100vh}
.mono{font-family:'JetBrains Mono',monospace}
.card{background:var(--card);border:1px solid var(--line);border-radius:1rem;transition:transform .2s,box-shadow .2s,border-color .2s}
.card:hover{transform:translateY(-3px);box-shadow:0 0 24px rgba(0,229,255,.12);border-color:#2b3b52}
.flash-up{animation:fu .6s}.flash-down{animation:fd .6s}
@keyframes fu{0%{color:#00e676;text-shadow:0 0 10px #00e676}100%{}}
@keyframes fd{0%{color:#ff1744;text-shadow:0 0 10px #ff1744}100%{}}
.pulse-glow{animation:pg 1.6s infinite}
@keyframes pg{0%,100%{filter:drop-shadow(0 0 2px currentColor)}50%{filter:drop-shadow(0 0 9px currentColor)}}
.radar{width:34px;height:34px;border-radius:50%;border:1px solid var(--cyan);position:relative;overflow:hidden;background:radial-gradient(circle,rgba(0,229,255,.15),transparent 70%)}
.radar::after{content:'';position:absolute;inset:0;background:conic-gradient(from 0deg,rgba(0,229,255,.7),transparent 25%);animation:spin 1.6s linear infinite}
.radar.idle::after{animation-duration:6s;opacity:.4}
@keyframes spin{to{transform:rotate(360deg)}}
.dot{width:8px;height:8px;border-radius:50%}
.dot.on{background:#00e676;box-shadow:0 0 8px #00e676;animation:pg 1.4s infinite;color:#00e676}
.dot.off{background:#ff1744}
.skel{background:linear-gradient(90deg,#131a26 0%,#1c2636 50%,#131a26 100%);background-size:200% 100%;animation:sh 1.3s infinite;border-radius:1rem}
@keyframes sh{to{background-position:-200% 0}}
.fadein{animation:fi .4s both}
@keyframes fi{from{opacity:0;transform:translateY(8px)}}
.seg button{padding:.35rem .7rem;font-size:.8rem;border-radius:.5rem;color:#8b9bb4}
.seg button.act{background:rgba(0,229,255,.12);color:var(--cyan)}
.btn{background:#18212f;border:1px solid var(--line);border-radius:.6rem;padding:.4rem .8rem;font-size:.85rem}
.btn:hover{border-color:var(--cyan);color:var(--cyan)}
input,select{background:#0f1520;border:1px solid var(--line);border-radius:.6rem;padding:.45rem .7rem;color:#dbe4f0;outline:none}
input:focus,select:focus{border-color:var(--cyan)}
.noscroll::-webkit-scrollbar{height:4px}.noscroll::-webkit-scrollbar-thumb{background:#1f2a3a}
input[type=range]{padding:0;accent-color:#00e5ff}
a{color:var(--cyan)}