/* ===== پایهٔ سازگاری (safe-area و hidden) ===== */:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}
/* چیدمان: میز کار به‌شکل رک ابزار در ستون اصلی؛ ماموریت، نشان و وضعیت در ستون کناری. موبایل تک‌ستون. */
:root{
  --bg:#070b1d; --bg2:#0c1430; --panel:#0f1a3a; --panel2:#142450; --line:#1f3566; --line2:#2d4c8c;
  --fg:#e9edf9; --mut:#9aa6c9; --dim:#667599;
  --purple:#2f8cff; --purple-t:#8cc4ff; --cyan:#0cccfc; --green:#34d399; --amber:#fbbf24; --red:#f87171;
  --ff:'Vazirmatn',system-ui,'Segoe UI',Tahoma,sans-serif; --fm:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background-color:var(--bg);
  background-image:
    linear-gradient(rgba(120,140,220,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,140,220,.045) 1px,transparent 1px),
    radial-gradient(900px 420px at 85% -10%,rgba(168,85,247,.16),transparent 70%),
    radial-gradient(700px 380px at 5% 0%,rgba(34,211,238,.10),transparent 70%);
  background-size:28px 28px,28px 28px,auto,auto;
  background-attachment:scroll;
  color:var(--fg);font:400 15px/1.75 var(--ff);
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:0 40px;
  direction:rtl;
}
body.lock{overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
h1,h2,h3{text-wrap:balance}
a{color:var(--cyan)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.mono,.num{font-family:var(--fm);direction:ltr;unicode-bidi:isolate}
.num{font-variant-numeric:tabular-nums}
.shell{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:22px}

/* ---- بالای صفحه ---- */
.top{display:flex;flex-direction:column;gap:14px;padding-top:18px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.2px}
.brand .mk{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line2);background:var(--panel);color:var(--cyan)}
.brand small{display:block;font:500 11px/1.2 var(--fm);color:var(--dim);direction:ltr;text-align:right}
.tbtn{display:inline-flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);color:var(--fg);padding:7px 12px;cursor:pointer;min-height:38px}
.tbtn:hover{border-color:var(--line2);background:var(--panel2)}
.labrow{display:flex;flex-direction:column;gap:10px}
.labname{width:100%;background:transparent;border:0;border-bottom:1px dashed var(--line2);font:800 clamp(24px,5.5vw,38px)/1.3 var(--ff);padding:2px 0 6px;color:var(--fg);border-radius:0}
.labname::placeholder{color:var(--dim)}
.labname:focus{outline:none;border-bottom-color:var(--cyan)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:var(--panel);color:var(--mut);padding:5px 12px;font-size:13px;cursor:pointer;min-height:34px}
.chip:hover{border-color:var(--line2);color:var(--fg)}
.chip[aria-pressed="true"]{border-color:var(--cyan);color:var(--cyan);background:rgba(34,211,238,.08)}
.lbl-s{font-size:12px;color:var(--dim);letter-spacing:.3px}

.status{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.cell{background:var(--panel);border:1px solid var(--line);padding:11px 13px;display:flex;flex-direction:column;gap:6px;min-width:0}
.cell .k{font-size:12px;color:var(--mut);display:flex;align-items:center;gap:6px}
.cell .v{font:600 20px/1.2 var(--fm);direction:ltr;text-align:right}
.cell .v small{font:400 12px var(--ff);color:var(--mut);direction:rtl}
.cell.lv{grid-column:1/-1}
.bar{height:8px;background:var(--bg2);border:1px solid var(--line);position:relative;overflow:hidden}
.bar>i{position:absolute;inset:0 0 0 auto;background:linear-gradient(90deg,var(--purple),var(--cyan));width:0;transition:width .5s cubic-bezier(.2,.8,.2,1)}

.lvl-line{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.lvl-line b{font-size:18px}
.flame{color:var(--amber)}

/* ---- چیدمان اصلی ---- */
.main{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
@media(min-width:960px){.main{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);align-items:start}}
.col{display:flex;flex-direction:column;gap:22px;min-width:0}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.sec-h h2{font:800 20px/1.4 var(--ff)}
.sec-h p{font-size:13px;color:var(--mut)}

/* ---- میز کار ---- */
.bench{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}@media(min-width:520px){.bench{grid-template-columns:repeat(3,minmax(0,1fr))}}
.unit{--cc:var(--cyan);position:relative;background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px;min-height:176px;min-width:0;transition:border-color .2s,transform .2s,box-shadow .2s}
.unit::before,.unit::after{content:"";position:absolute;width:9px;height:9px;border:0 solid var(--cc);opacity:.7}
.unit::before{top:-1px;right:-1px;border-top-width:2px;border-right-width:2px}
.unit::after{bottom:-1px;left:-1px;border-bottom-width:2px;border-left-width:2px}
.c-crispr{--cc:var(--purple)} .c-molec{--cc:var(--cyan)} .c-anal{--cc:var(--green)}
.unit.on:hover{border-color:var(--cc);box-shadow:0 0 0 1px var(--cc),0 8px 26px -12px var(--cc);transform:translateY(-2px)}
.rail{display:flex;align-items:center;gap:7px;font:500 10.5px var(--fm);color:var(--dim);direction:ltr}
.led{width:7px;height:7px;border-radius:50%;background:var(--cc);box-shadow:0 0 8px var(--cc);animation:blink 2.8s infinite}
@keyframes blink{0%,86%,100%{opacity:1}92%{opacity:.35}}
.rail .sp{flex:1}
.tier{font:600 10.5px var(--ff);padding:1px 7px;border:1px solid}
.tier.free{color:var(--green);border-color:rgba(52,211,153,.5)}
.tier.pro{color:var(--purple-t);border-color:rgba(47,140,255,.55)}
.uico{color:var(--cc);margin-top:4px}
.unit h3{font:700 15px/1.35 var(--ff)}
.unit .en{font:400 11px var(--fm);color:var(--dim);direction:ltr;text-align:right}
.uact{margin-top:auto;display:flex;gap:6px}
.unit.empty{border:1px dashed var(--line2);background:transparent;cursor:pointer;align-items:center;justify-content:center;gap:8px;color:var(--mut);text-align:center}
.unit.empty:hover{border-color:var(--cyan);color:var(--cyan);background:rgba(34,211,238,.04)}
.unit.empty::before,.unit.empty::after{display:none}
.plus{width:38px;height:38px;border:1px solid currentColor;display:grid;place-items:center;font:300 24px/1 var(--fm)}
.unit.locked{border:1px dashed var(--line);background:repeating-linear-gradient(135deg,transparent 0 8px,rgba(120,140,220,.05) 8px 16px);color:var(--dim);align-items:center;justify-content:center;text-align:center;gap:6px}
.unit.locked::before,.unit.locked::after{display:none}
.unit.locked b{font:600 13px var(--fm);direction:ltr}

/* ---- دکمه‌ها ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line2);background:var(--panel2);color:var(--fg);padding:8px 14px;cursor:pointer;min-height:40px;font-weight:600;transition:background .15s,border-color .15s}
.btn:hover{border-color:var(--cyan)}
.btn.primary{background:linear-gradient(135deg,#1560e0,#0cb4fc);border-color:transparent;color:#fff}
.btn.primary:hover{filter:brightness(1.12)}
.btn.sm{padding:5px 11px;min-height:34px;font-size:13px}
.btn.ghost{background:transparent;border-color:var(--line)}
.btn.ghost:hover{border-color:var(--line2);background:var(--panel2)}
.btn.danger{border-color:rgba(248,113,113,.5);color:var(--red)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.ib{width:34px;min-height:34px;padding:0}

/* ---- ماموریت ---- */
.card{background:var(--panel);border:1px solid var(--line);padding:14px}
.mission{display:flex;gap:11px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}
.mission:first-child{border-top:0;padding-top:0}
.ring{flex:none;width:26px;height:26px;border:1.5px solid var(--line2);border-radius:50%;display:grid;place-items:center;color:transparent;margin-top:2px}
.mission.done .ring{background:var(--green);border-color:var(--green);color:#04210f}
.mission.done .mt{color:var(--mut);text-decoration:line-through;text-decoration-color:var(--dim)}
.mbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.mt{font-weight:600}
.mmeta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mut);flex-wrap:wrap}
.xp{font:600 12px var(--fm);color:var(--amber);direction:ltr}
.spec-meter{display:flex;gap:5px;margin-top:6px}
.spec-meter i{flex:1;height:6px;background:var(--bg2);border:1px solid var(--line)}
.spec-meter i.on{background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 8px rgba(34,211,238,.5)}

/* ---- فهرست ابزار ---- */
.rows{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--panel)}
.trow{--cc:var(--cyan);display:flex;gap:12px;align-items:center;padding:11px 12px;border-top:1px solid var(--line)}
.trow:first-child{border-top:0}
.trow .ti{flex:none;color:var(--cc);width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);background:var(--bg2)}
.trow .tb{flex:1;min-width:0}
.trow .tb b{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.trow .tb p{font-size:12.5px;color:var(--mut);line-height:1.6}
.trow .rec{font-size:11px;color:var(--cyan);border:1px solid rgba(34,211,238,.4);padding:0 6px}

/* ---- نشان‌ها ---- */
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.badge{border:1px solid var(--line);padding:9px 10px;display:flex;flex-direction:column;gap:3px;background:var(--bg2);opacity:.55}
.badge.on{opacity:1;border-color:rgba(251,191,36,.55);background:rgba(251,191,36,.06)}
.badge b{font-size:13px}
.badge span{font-size:11.5px;color:var(--mut);line-height:1.5}
.badge.on b{color:var(--amber)}

.foot{border-top:1px solid var(--line);padding-top:16px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;color:var(--mut);font-size:13px}

/* ---- برگه‌ی ابزار ---- */
.sheet{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) 0 env(safe-area-inset-left,0px)}
.sheet[hidden]{display:none}
.sheet-bg{position:absolute;inset:0;background:rgba(4,7,16,.78);backdrop-filter:blur(3px)}
.panel{--cc:var(--cyan);position:relative;width:100%;max-width:920px;max-height:94%;overflow:auto;background:var(--bg2);border:1px solid var(--line2);border-top:2px solid var(--cc);padding:0 0 env(safe-area-inset-bottom,0px);animation:rise .28s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@media(min-width:760px){.sheet{align-items:center;padding:24px}.panel{max-height:100%}}
.ph{position:sticky;top:0;z-index:2;background:var(--bg2);display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.ph .pi{color:var(--cc)}
.ph h2{font:800 18px/1.3 var(--ff);flex:1;min-width:0}
.ph .en{font:400 11px var(--fm);color:var(--dim);direction:ltr;display:block}
.pb{padding:16px;display:flex;flex-direction:column;gap:14px}
.trial{font:500 12px var(--fm);color:var(--purple-t);direction:ltr}

/* ---- فرم و خروجی ---- */
.hint{font-size:13.5px;color:var(--mut)}
.lbl{display:block;font-size:12.5px;color:var(--mut);margin-bottom:4px}
.fld{display:flex;flex-direction:column;min-width:0}
input[type=text],input[type=number],select,textarea{width:100%;background:var(--panel);border:1px solid var(--line2);padding:8px 10px;color:var(--fg);border-radius:0;min-height:40px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan)}
textarea{resize:vertical;line-height:1.6}
.seqbox,.mono-in{font-family:var(--fm);font-size:13px;direction:ltr;text-align:left;letter-spacing:.3px}
input[type=range]{width:100%;accent-color:var(--cyan)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.meta{font-size:12.5px;color:var(--mut)}
details.adv{border:1px solid var(--line);background:var(--panel);padding:8px 12px}
details.adv summary{cursor:pointer;color:var(--mut);font-size:13.5px;min-height:28px}
details.adv[open] summary{margin-bottom:10px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.stat{background:var(--panel);border:1px solid var(--line);padding:9px 11px;min-width:0}
.stat .k{font-size:12px;color:var(--mut)}
.stat .v{font:600 18px/1.3 var(--fm);direction:ltr;text-align:right;overflow-wrap:anywhere}
.stat .v small{font-size:11px;color:var(--mut)}
.comp{display:flex;height:22px;border:1px solid var(--line);overflow:hidden}
.comp span{display:grid;place-items:center;font:600 11px var(--fm);color:#04101a;min-width:0}
.cA{background:#34d399}.cC{background:#22d3ee}.cG{background:#fbbf24}.cT{background:#a855f7;color:#fff!important}
.out{background:var(--panel);border:1px solid var(--line);padding:10px 12px;display:flex;flex-direction:column;gap:6px;min-width:0}
.out .oh{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--mut)}
.seqout{font:400 12.5px/1.7 var(--fm);direction:ltr;text-align:left;word-break:break-all;max-height:130px;overflow:auto;color:var(--fg)}
.flags{display:flex;flex-wrap:wrap;gap:6px}
.fl{font-size:12px;padding:1px 8px;border:1px solid;line-height:1.7}
.fl.ok{color:var(--green);border-color:rgba(52,211,153,.4)}
.fl.warn{color:var(--amber);border-color:rgba(251,191,36,.45)}
.tw{overflow-x:auto;border:1px solid var(--line)}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{padding:7px 10px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
th{color:var(--mut);font-weight:500;background:var(--panel)}
td.m{font-family:var(--fm);direction:ltr;text-align:left}
tr:last-child td{border-bottom:0}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tab{border:1px solid var(--line);background:var(--panel);color:var(--mut);padding:6px 12px;cursor:pointer;min-height:36px}
.tab[aria-selected="true"]{color:var(--cyan);border-color:var(--cyan);background:rgba(34,211,238,.08)}
.pair{border:1px solid var(--line);background:var(--panel);padding:12px;display:flex;flex-direction:column;gap:9px;min-width:0}
.pair h4{margin:0;font-size:14px;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.pline{display:flex;flex-direction:column;gap:3px}
.pline .pl{display:flex;gap:8px;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--mut);flex-wrap:wrap}
.score{height:6px;background:var(--bg2);border:1px solid var(--line);flex:1;min-width:60px;position:relative}
.score i{position:absolute;inset:0 auto 0 0;background:var(--green)}
.seed{color:var(--purple-t);font-weight:600}
.pam{color:var(--amber)}
.viz{border:1px solid var(--line);background:var(--bg);overflow:hidden}
.viz svg,.viz canvas{display:block;width:100%;height:auto}
.err{border:1px solid rgba(248,113,113,.5);color:var(--red);padding:9px 12px;background:rgba(248,113,113,.06)}
.okb{border:1px solid rgba(52,211,153,.5);color:var(--green);padding:9px 12px;background:rgba(52,211,153,.06)}
.pipbtns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:560px){.pipbtns{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pipbtns .btn{flex-direction:column;gap:2px;min-height:64px}
.pipbtns small{font:400 11px var(--fm);color:var(--mut);direction:ltr}
.task{font:700 22px/1.5 var(--ff);padding:16px;border:1px solid var(--line2);background:var(--panel);text-align:center}
.task .vol{font-family:var(--fm);color:var(--cyan);direction:ltr;display:inline-block}
.dots{display:flex;gap:6px;justify-content:center}
.dots i{width:22px;height:6px;background:var(--bg2);border:1px solid var(--line)}
.dots i.ok{background:var(--green);border-color:var(--green)}
.dots i.no{background:var(--red);border-color:var(--red)}
.dots i.cur{border-color:var(--cyan)}
.note{border:1px solid var(--line);background:var(--panel);padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.note .nh{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--mut);flex-wrap:wrap}
.note p{white-space:pre-wrap;overflow-wrap:anywhere}
.tag{font-size:11px;border:1px solid var(--line2);padding:0 6px;color:var(--mut)}
.test{display:flex;gap:10px;align-items:flex-start;padding:6px 0;border-top:1px solid var(--line);font-size:13.5px}
.test:first-child{border-top:0}
.test .tk{flex:none;width:20px;height:20px;display:grid;place-items:center;border-radius:50%}
.test.ok .tk{background:var(--green);color:#04210f}
.test.no .tk{background:var(--red);color:#2a0606}
.test small{color:var(--mut);font-family:var(--fm);direction:ltr;display:inline-block}

/* ---- پیام‌ها ---- */
.toasts{position:fixed;z-index:90;bottom:calc(14px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;width:min(92vw,420px);pointer-events:none}
.toast{background:var(--panel2);border:1px solid var(--line2);border-right:3px solid var(--cyan);padding:9px 14px;font-size:14px;animation:tin .25s ease-out;box-shadow:0 10px 30px -10px #000}
.toast.good{border-right-color:var(--green)} .toast.warn{border-right-color:var(--amber)} .toast.bad{border-right-color:var(--red)}
@keyframes tin{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.xp-pop{position:fixed;z-index:95;left:50%;bottom:90px;transform:translateX(-50%);font:700 26px var(--fm);color:var(--amber);text-shadow:0 0 18px rgba(251,191,36,.7);pointer-events:none;animation:xpup 1.15s ease-out forwards;direction:ltr}
@keyframes xpup{0%{opacity:0;transform:translate(-50%,10px) scale(.8)}20%{opacity:1;transform:translate(-50%,0) scale(1.1)}100%{opacity:0;transform:translate(-50%,-70px) scale(1)}}
.modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px}
.modal[hidden]{display:none}
.modal .mb{position:relative;max-width:440px;width:100%;background:var(--panel);border:1px solid var(--line2);border-top:2px solid var(--amber);padding:20px;display:flex;flex-direction:column;gap:12px;animation:rise .25s ease-out}
.modal h3{font:800 20px var(--ff)}
.modal .big{font:700 44px/1 var(--fm);color:var(--amber);direction:ltr;text-shadow:0 0 24px rgba(251,191,36,.5)}
#fx{position:fixed;inset:0;z-index:99;pointer-events:none;width:100%;height:100%}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.brand img{width:44px;height:44px;object-fit:contain;display:block}
.eco{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:center}
@media(min-width:820px){.eco{grid-template-columns:minmax(0,320px) minmax(0,1fr)}}
.eco img{border-radius:50%;width:100%;max-width:340px;height:auto;margin:0 auto;display:block}
.dom{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.dom a{display:flex;flex-direction:column;gap:1px;border:1px solid var(--line);background:var(--panel);padding:8px 12px;text-decoration:none;color:var(--fg)}
.dom a:hover{border-color:var(--amber)}
.dom a b{font-size:14px}.dom a span{font:400 12px var(--fm);color:var(--cyan);direction:ltr;text-align:right}.dom a small{color:var(--mut);font-size:12px}
.foot img{width:76px;height:auto}
.top-logo{display:none}
