:root{
  --bg:#070b0f;--panel:#0d141b;--panel2:#111b24;--line:#1d2b38;--text:#d9e4ec;--mute:#8194a5;
  --green:#39ff88;--amber:#f5b942;--red:#ff5470;--cyan:#5ad1ff;--violet:#b78bff;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"IBM Plex Sans","IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.55;min-height:100vh;
  background-image:linear-gradient(rgba(57,255,136,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(57,255,136,.035) 1px,transparent 1px);background-size:32px 32px;}
[dir=rtl] body,[dir=rtl] .sans{font-family:"IBM Plex Sans Arabic","IBM Plex Sans",system-ui,sans-serif}
#rain{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:.16;pointer-events:none}
.top,main,.foot{position:relative;z-index:1}
.top{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 16px;background:rgba(7,11,15,.88);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{font-family:var(--mono);font-weight:600;font-size:14px;background:none;border:0;color:var(--text);cursor:pointer;padding:6px 0;direction:ltr;white-space:nowrap}
.brand .pr{color:var(--green)}.dim{color:var(--mute)}
.cur{color:var(--green);animation:blink 1.1s steps(1) infinite;margin-inline-start:4px}
@keyframes blink{50%{opacity:0}}
.top-r{display:flex;align-items:center;gap:8px}
.score{font-family:var(--mono);font-size:13px;color:var(--amber);border:1px solid rgba(245,185,66,.35);padding:5px 9px;border-radius:999px;white-space:nowrap;direction:ltr}
.lang{font-family:var(--sans);font-weight:600;font-size:14px;background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:999px;padding:6px 14px;cursor:pointer;min-height:36px}
.lang:hover,.lang:focus-visible{border-color:var(--green);color:var(--green)}
main{max-width:860px;margin:0 auto;padding:18px 16px 40px;outline:0}
.foot{max-width:860px;margin:0 auto;padding:0 16px 36px;color:var(--mute);font-size:12.5px;text-align:center}
h1,h2,h3{font-family:var(--mono);line-height:1.2;margin:0}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3{font-family:"IBM Plex Sans Arabic",var(--sans);font-weight:700}
.mono{font-family:var(--mono);direction:ltr;unicode-bidi:isolate}
p{margin:0 0 10px}
a{color:var(--cyan)}
button{font:inherit}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* hero */
.hero{border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,rgba(13,20,27,.96),rgba(13,20,27,.86));padding:20px 18px;margin-bottom:18px;box-shadow:0 0 0 1px rgba(57,255,136,.05),0 18px 50px -30px rgba(57,255,136,.45)}
.term{font-family:var(--mono);font-size:13px;color:var(--mute);direction:ltr;text-align:left;margin-bottom:12px;min-height:3.2em;white-space:pre-wrap}
.term b{color:var(--green);font-weight:600}
.hero h1{font-size:clamp(26px,7vw,40px);font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
.hero h1 em{font-style:normal;color:var(--green);text-shadow:0 0 18px rgba(57,255,136,.45)}
.hero .sub{color:#b5c4d0;max-width:60ch;margin-bottom:14px}
.who{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.who input{flex:1 1 180px;min-width:0}
input[type=text],input[type=password],textarea{background:#060a0e;border:1px solid var(--line);color:var(--text);border-radius:10px;padding:11px 12px;font-family:var(--mono);font-size:15px;width:100%}
input:focus,textarea:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 3px rgba(57,255,136,.15)}
.btn{background:var(--green);color:#04130a;border:0;border-radius:10px;padding:11px 16px;font-weight:700;cursor:pointer;min-height:44px;font-family:var(--sans)}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--green);color:var(--green)}
.btn.red{background:var(--red);color:#1b0308}
.btn.sm{padding:7px 12px;min-height:36px;font-size:14px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.prog{margin-top:16px}
.prog-top{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12.5px;color:var(--mute);margin-bottom:6px}
.bar{height:10px;border-radius:99px;background:#060a0e;border:1px solid var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--cyan));width:0;transition:width .5s}
[dir=rtl] .bar i{margin-inline-start:0}
.rank{color:var(--green)}

/* mission list */
.lvl{margin:22px 0 10px;display:flex;align-items:center;gap:10px}
.lvl h2{font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.lvl .ln{flex:1;height:1px;background:var(--line)}
.lvl small{color:var(--mute);font-size:12.5px}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;box-shadow:0 0 10px currentColor;background:currentColor;flex:none}
.c-b{color:var(--green)}.c-i{color:var(--amber)}.c-a{color:var(--red)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.card{position:relative;text-align:start;background:rgba(13,20,27,.94);border:1px solid var(--line);border-radius:var(--r);padding:14px 14px 12px;color:var(--text);cursor:pointer;display:flex;flex-direction:column;gap:6px;min-height:132px;transition:transform .15s,border-color .15s}
.card:hover,.card:focus-visible{transform:translateY(-2px);border-color:currentColor}
.card .ic{font-size:24px;line-height:1}
.card h3{font-size:16.5px;color:var(--text)}
.card p{color:var(--mute);font-size:13.5px;margin:0;flex:1}
.card .meta{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:12px;color:var(--mute);direction:ltr}
.card.done{border-color:rgba(57,255,136,.45)}
.card.done .meta b{color:var(--green)}
.tag{font-family:var(--mono);font-size:11px;border:1px solid currentColor;border-radius:99px;padding:1px 8px;direction:ltr}

/* mission view */
.back{background:none;border:0;color:var(--mute);cursor:pointer;font-family:var(--mono);font-size:13px;padding:8px 0;margin-bottom:6px}
.back:hover{color:var(--green)}
.mh{margin-bottom:14px}
.mh h1{font-size:clamp(22px,6vw,30px);margin:6px 0 6px}
.mh p{color:#b5c4d0;margin:0}
.panel{background:rgba(13,20,27,.95);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:14px}
.panel h3{font-size:15px;margin-bottom:8px;color:var(--green)}
.row{display:flex;gap:8px;flex-wrap:wrap}
.row>*{flex:1 1 130px}
.step{font-family:var(--mono);font-size:12.5px;color:var(--mute);margin-bottom:8px;direction:ltr;text-align:start}
.ok{color:var(--green)}.bad{color:var(--red)}.warn{color:var(--amber)}
.note{border-inline-start:3px solid var(--cyan);background:rgba(90,209,255,.07);padding:10px 12px;border-radius:8px;font-size:14.5px;margin-top:10px}
.note.good{border-color:var(--green);background:rgba(57,255,136,.07)}
.note.err{border-color:var(--red);background:rgba(255,84,112,.07)}
.note.amber{border-color:var(--amber);background:rgba(245,185,66,.07)}
ul.clean{margin:8px 0 0;padding-inline-start:20px}
ul.clean li{margin-bottom:4px}

/* phone message mock */
.phone{background:#0a1016;border:1px solid var(--line);border-radius:18px;padding:12px;max-width:420px;margin:0 auto 12px}
.phone .from{font-family:var(--mono);font-size:12.5px;color:var(--mute);margin-bottom:8px;display:flex;justify-content:space-between;gap:8px}
.bub{background:#16222d;border-radius:14px;border-start-start-radius:4px;padding:10px 12px;font-size:15px;white-space:pre-wrap;word-break:break-word}
.bub .lk{color:var(--cyan);text-decoration:underline;direction:ltr;unicode-bidi:isolate}
.ctx{font-size:13px;color:var(--amber);margin-top:8px}

/* options */
.opts{display:grid;gap:8px}
.opt{text-align:start;background:#0a1016;border:1px solid var(--line);color:var(--text);border-radius:10px;padding:12px;cursor:pointer;min-height:44px;word-break:break-all}
.opt.url{font-family:var(--mono);font-size:13.5px;direction:ltr;text-align:left}
.opt:hover{border-color:var(--cyan)}
.opt.right{border-color:var(--green);background:rgba(57,255,136,.1)}
.opt.wrong{border-color:var(--red);background:rgba(255,84,112,.1)}
.faces{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.faces img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;border:1px solid var(--line);display:block}
.faces figure{margin:0;text-align:center;font-family:var(--mono);font-size:12px;color:var(--mute)}
@media (max-width:420px){.faces{grid-template-columns:repeat(2,1fr)}}

/* password */
.meter{height:12px;border-radius:99px;background:#060a0e;border:1px solid var(--line);overflow:hidden;margin:12px 0 8px}
.meter i{display:block;height:100%;width:0;transition:width .3s,background .3s}
.crack{font-family:var(--mono);font-size:clamp(20px,6vw,30px);font-weight:800}
[dir=rtl] .crack{font-family:"IBM Plex Sans Arabic",var(--sans)}

/* chat */
.chat{background:#060a0e;border:1px solid var(--line);border-radius:12px;padding:10px;height:300px;overflow:auto;display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.msg{max-width:88%;padding:8px 11px;border-radius:12px;font-size:14.5px;white-space:pre-wrap;word-break:break-word}
.msg.bot{background:#13202b;align-self:flex-start;border:1px solid #1f3140}
.msg.me{background:rgba(57,255,136,.14);border:1px solid rgba(57,255,136,.35);align-self:flex-end}
.msg.sys{align-self:center;background:rgba(255,84,112,.1);border:1px solid rgba(255,84,112,.4);color:#ffb3c0;font-family:var(--mono);font-size:12.5px;max-width:100%}
.msg .who2{display:block;font-family:var(--mono);font-size:11px;color:var(--mute);margin-bottom:2px;direction:ltr;text-align:start}
.lvls{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.lv{font-family:var(--mono);font-size:12px;border:1px solid var(--line);border-radius:99px;padding:4px 10px;background:none;color:var(--mute);cursor:pointer;direction:ltr}
.lv.on{border-color:var(--cyan);color:var(--cyan)}
.lv.dn{border-color:rgba(57,255,136,.5);color:var(--green)}
.lv:disabled{opacity:.4;cursor:not-allowed}

pre.code{background:#060a0e;border:1px solid var(--line);border-radius:10px;padding:12px;overflow:auto;font-family:var(--mono);font-size:12.5px;line-height:1.6;direction:ltr;text-align:left;margin:0 0 10px;color:#b9f5cf;white-space:pre-wrap;word-break:break-word}
pre.code .hl{color:var(--amber)}

/* kit */
.chk{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px dashed var(--line);cursor:pointer}
.chk:last-child{border:0}
.chk input{width:22px;height:22px;accent-color:var(--green);flex:none;margin-top:2px}
.chk b{display:block}
.chk span{color:var(--mute);font-size:14px}
.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.num{display:block;text-decoration:none;background:#0a1016;border:1px solid var(--line);border-radius:12px;padding:12px;color:var(--text)}
.num:hover{border-color:var(--amber)}
.num strong{display:block;font-family:var(--mono);font-size:24px;color:var(--amber);direction:ltr;text-align:start}
.num span{font-size:13.5px;color:var(--mute)}

/* certificate */
.cert{border:1px solid rgba(57,255,136,.5);border-radius:var(--r);padding:22px 18px;text-align:center;background:radial-gradient(120% 120% at 50% 0%,rgba(57,255,136,.14),rgba(13,20,27,.96) 60%);margin-top:18px}
.cert .big{font-family:var(--mono);font-size:clamp(24px,7vw,38px);font-weight:800;color:var(--green);margin:6px 0}
.cert .nm{font-size:20px;font-weight:600}
.toast{position:fixed;inset-inline:0;bottom:18px;margin:0 auto;width:max-content;max-width:90vw;background:#0d141b;border:1px solid var(--green);color:var(--green);font-family:var(--mono);font-size:14px;padding:10px 16px;border-radius:99px;z-index:20;opacity:0;transform:translateY(12px);transition:.25s;pointer-events:none;direction:ltr}
.toast.show{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}#rain{display:none}}

.clock{font-size:13.5px;color:var(--amber);margin:10px 0 0}
.by{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:22px;color:var(--mute);font-size:13px}
.by b{color:var(--text);font-size:14px}.by i{font-style:normal;color:var(--green)}
textarea{resize:vertical;font-family:var(--sans)}
@media (max-width:430px){.brand .dim,.brand .cur{display:none}.brand{font-size:12.5px}.top{padding:10px 12px}.top-r{gap:6px}.lang{padding:6px 10px;font-size:13px}}