/* ===== CYBER HACKED — shared room styles ===== */
:root{
  --bg:#0c1220; --bg2:#080d18; --nav:#151d2e; --panel:#172034; --panel2:#202b42; --panel3:#2c3a57;
  --line:rgba(148,178,220,.14); --line-strong:rgba(148,178,220,.28);
  --red:#ff4433; --red-t:#ff6a5c; --red-btn:#e02d1c; --red-hover:#f23f2d; --red-dim:rgba(255,68,51,.15);
  --blue:#4fc3ff; --blue-dim:rgba(79,195,255,.13); --green:#3fe08a; --green-dim:rgba(63,224,138,.13); --amber:#ffc23c; --amber-dim:rgba(255,194,60,.13); --purple:#b48cff;
  --text:#f2f5fa; --text-dim:#b4c1d4; --text-faint:#8797af;
  --ar:'IBM Plex Sans Arabic',sans-serif; --head:'Space Grotesk','IBM Plex Sans Arabic',sans-serif; --mono:'JetBrains Mono',monospace;
  --r:12px; --gutter:clamp(16px,3vw,40px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:92px}
body{background:var(--bg); color:var(--text); font-family:var(--ar); font-size:17.5px; line-height:1.85; direction:rtl; text-align:right; overflow-x:clip; -webkit-font-smoothing:antialiased}
@media(max-width:760px){ body{font-size:16.5px; padding-bottom:66px} }
h1,h2,h3{font-family:var(--head); line-height:1.25; color:#fff}
a{color:inherit}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer; text-align:inherit}
input,select{font:inherit}
::selection{background:var(--red); color:#fff}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:4px}
[hidden]{display:none !important}
.en{font-family:var(--mono); font-variant-ligatures:none; direction:ltr; unicode-bidi:isolate}
svg.i{width:1.3em; height:1.3em; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:10px 22px; border-radius:7px; font-family:var(--ar); font-weight:700; font-size:.95rem; text-decoration:none; transition:transform .15s, background .15s, box-shadow .15s, border-color .15s; white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-red{background:var(--red-btn); color:#fff}
.btn-red:hover{background:var(--red-hover); box-shadow:0 6px 22px rgba(255,68,51,.35); transform:translateY(-2px)}
.btn-ghost{border:1.5px solid var(--line-strong); color:var(--text)}
.btn-ghost:hover{border-color:var(--text-dim); background:rgba(255,255,255,.04)}
.btn-sm{padding:6px 15px; font-size:.87rem}
.btn[disabled]{background:var(--panel3); color:var(--text-faint); cursor:not-allowed; box-shadow:none; transform:none}

/* ===== TOPBAR ===== */
.topbar{position:sticky; top:0; z-index:500; background:var(--nav); border-bottom:1px solid var(--line)}
.topbar-in{display:flex; align-items:center; gap:clamp(10px,2vw,28px); min-height:70px; max-width:1620px; margin:0 auto; padding-inline:var(--gutter)}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0}
.mark{position:relative; display:block; width:48px; height:39px; overflow:hidden; flex-shrink:0}
.mark img{position:absolute; width:65px; height:65px; max-width:none; left:-10px; top:-14px; mix-blend-mode:screen}
.brand-name{display:block; font-family:var(--head); font-weight:700; font-size:1.2rem; line-height:1.1; direction:ltr}
.brand-name b{color:#e8ecf2; font-weight:700} .brand-name i{color:var(--red); font-style:normal}
.brand-tag{display:block; font-family:var(--mono); font-variant-ligatures:none; direction:ltr; font-size:.54rem; color:var(--text-faint); margin-top:4px; white-space:nowrap}
.topnav{display:flex; gap:2px}
.topnav a{padding:7px 13px; border-radius:8px; color:var(--text-dim); text-decoration:none; font-size:.9rem; font-weight:500; transition:color .15s, background .15s}
.topnav a:hover{color:#fff; background:rgba(255,255,255,.05)}
.topnav a.active{color:#fff; font-weight:700}
@media(max-width:1040px){ .topnav{display:none} }
.top-tools{display:flex; align-items:center; gap:clamp(8px,1.3vw,16px); margin-inline-start:auto}
.stat-chip{display:flex; align-items:center; gap:5px; font-family:var(--mono); font-variant-ligatures:none; font-weight:700; font-size:.92rem; color:#fff; direction:ltr}
.stat-chip svg{width:19px; height:19px; flex-shrink:0}
.stat-chip.bump{animation:bump .5s}
@keyframes bump{40%{transform:scale(1.35)}}
.avatar{width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.2rem; background:var(--bg2); border:2px solid var(--red); text-decoration:none; flex-shrink:0}
@media(max-width:600px){ .brand-tag{display:none} .brand-name{font-size:1.02rem} .mark{width:40px;height:33px} .mark img{width:54px;height:54px;left:-8px;top:-12px} }
@media(max-width:380px){ .brand-name{display:none} }
.read-track{height:3px; background:var(--line)}
.read-fill{height:100%; width:0; background:var(--red); box-shadow:0 0 8px rgba(255,68,51,.6)}

.tabs-m{display:none}
@media(max-width:760px){
  .tabs-m{position:fixed; bottom:0; left:0; right:0; z-index:500; display:grid; grid-template-columns:repeat(4,1fr); background:var(--nav); border-top:1px solid var(--line-strong); padding-bottom:env(safe-area-inset-bottom)}
  .tabs-m a{display:block; text-align:center; padding:14px 2px; font-size:.84rem; color:var(--text-dim); text-decoration:none}
}

/* ===== ROOM HERO ===== */
.room-hero{position:relative; overflow:hidden; background:var(--a,linear-gradient(135deg,#2765c9,#14305f))}
.room-hero::after{content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(12,18,32,.15),rgba(12,18,32,.8) 72%)}
.a-green{--a:linear-gradient(120deg,#1a7a34,#0d3d1c)} .a-blue{--a:linear-gradient(120deg,#2765c9,#14305f)}
.a-purple{--a:linear-gradient(120deg,#7a3fc4,#351a63)} .a-red{--a:linear-gradient(120deg,#d41d36,#6d0e22)}
.a-amber{--a:linear-gradient(120deg,#c98512,#5d3a06)} .a-crimson{--a:linear-gradient(120deg,#c2185b,#4e0d32)}
.a-teal{--a:linear-gradient(120deg,#0f8f8a,#07403f)} .a-indigo{--a:linear-gradient(120deg,#4150c9,#1c2262)}
.hero-art{position:absolute; z-index:1; left:0; bottom:0; width:min(44%,600px); height:100%; pointer-events:none; opacity:.95; -webkit-mask-image:linear-gradient(90deg,#000 72%,transparent); mask-image:linear-gradient(90deg,#000 72%,transparent)}
.hero-art svg{display:block; width:100%; height:100%}
.ra-flow{stroke-dasharray:9 8; animation:raFlow 1s linear infinite}
@keyframes raFlow{to{stroke-dashoffset:-17}}
.ra-sweep{transform-origin:60px 60px; animation:raSweep 4s linear infinite}
@keyframes raSweep{to{transform:rotate(360deg)}}
.room-hero .hero-in{padding-inline-end:calc(min(44%,600px) + 12px)}
@media(max-width:1180px){ .hero-art{width:36%} .room-hero .hero-in{padding-inline-end:calc(36% + 12px)} }
@media(max-width:860px){
  .hero-art{position:relative; left:auto; bottom:auto; width:100%; height:clamp(130px,36vw,220px); opacity:1; -webkit-mask-image:none; mask-image:none}
  .room-hero .hero-in{padding-inline-end:var(--gutter); padding-top:14px}
}
.hero-in{position:relative; z-index:2; display:flex; align-items:center; gap:clamp(16px,3vw,34px); max-width:1620px; margin:0 auto; padding:clamp(24px,4vw,44px) var(--gutter)}
.hero-ico{font-size:clamp(3.3rem,7vw,5.6rem); line-height:1; filter:drop-shadow(0 12px 10px rgba(0,0,0,.45)); animation:bob 3.6s ease-in-out infinite; flex-shrink:0}
@keyframes bob{50%{translate:0 -8px}}
@media(max-width:600px){ .hero-ico{display:none} }
.crumb{font-size:.84rem; color:var(--text-dim)}
.crumb a{text-decoration:none} .crumb a:hover{color:#fff}
.room-hero h1{font-size:clamp(1.8rem,3.8vw,3rem); margin-top:4px}
.hero-en{font-family:var(--mono); font-variant-ligatures:none; direction:ltr; text-align:right; font-size:.8rem; color:var(--text-dim); margin-top:3px}
.hero-meta{display:flex; flex-wrap:wrap; align-items:center; gap:7px 16px; margin-top:11px; font-size:.87rem; color:var(--text-dim)}
.hero-meta b{color:#fff}
.lvl{display:inline-flex; align-items:center; gap:7px; font-weight:600}
.lvl i{display:flex; align-items:flex-end; gap:2px; height:12px}
.lvl s{display:block; width:3px; background:rgba(255,255,255,.3); border-radius:1px}
.lvl s:nth-child(1){height:5px} .lvl s:nth-child(2){height:8px} .lvl s:nth-child(3){height:12px}
.lvl.easy{color:var(--green)} .lvl.mid{color:var(--amber)} .lvl.hard{color:var(--red-t)}
.lvl.easy s:nth-child(-n+1),.lvl.mid s:nth-child(-n+2),.lvl.hard s:nth-child(-n+3){background:currentColor}
.prog{display:flex; align-items:center; gap:11px; margin-top:13px; max-width:560px}
.bar{flex:1; height:8px; border-radius:9px; background:rgba(0,0,0,.4); overflow:hidden}
.bar i{display:block; height:100%; width:0; border-radius:9px; background:var(--red); transition:width .6s}
.prog span{font-family:var(--mono); font-variant-ligatures:none; font-size:.82rem; direction:ltr; color:#fff; flex-shrink:0}

/* ===== LAYOUT ===== */
.layout{display:grid; grid-template-columns:260px minmax(0,1fr); gap:clamp(22px,3vw,44px); align-items:start; max-width:1620px; margin:0 auto; padding:clamp(20px,3vw,34px) var(--gutter) 60px}
@media(max-width:1020px){ .layout{grid-template-columns:minmax(0,1fr)} .side{display:none !important} }
.side{position:sticky; top:88px; display:flex; flex-direction:column; gap:14px}
.side-box{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:15px}
.side-label{font-family:var(--mono); font-variant-ligatures:none; direction:ltr; text-align:left; font-size:.66rem; color:var(--red-t); letter-spacing:1.5px; margin-bottom:9px; font-weight:700}
.toc{list-style:none; display:flex; flex-direction:column; gap:2px}
.toc a{display:flex; align-items:center; gap:9px; padding:7px 9px; text-decoration:none; color:var(--text-dim); font-size:.9rem; line-height:1.4; border-radius:6px; border-right:2px solid transparent; transition:background .15s, color .15s}
.toc a:hover{color:#fff; background:rgba(255,255,255,.04)}
.toc a.active{color:#fff; font-weight:600; background:var(--red-dim); border-right-color:var(--red)}
.toc-n{font-family:var(--mono); font-variant-ligatures:none; font-size:.72rem; color:var(--text-faint); flex-shrink:0}
.toc a.done .toc-n{color:var(--green)}
.toc-c{margin-right:auto; color:var(--green); font-size:.78rem}
.side-note{font-size:.82rem; color:var(--text-faint); line-height:1.6}

/* ===== OBJECTIVES ===== */
.objectives{background:linear-gradient(135deg,var(--red-dim),var(--panel) 50%); border:1px solid var(--line-strong); border-right:4px solid var(--red); border-radius:8px; padding:clamp(17px,2vw,24px); margin-bottom:18px}
.objectives h2{font-size:1.15rem}
.objectives ul{list-style:none; margin-top:8px; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:5px 24px}
.objectives li{color:var(--text-dim); font-size:.96rem; line-height:1.65; padding-right:21px; position:relative}
.objectives li::before{content:'✓'; position:absolute; right:0; color:var(--green); font-weight:700}

/* ===== TASK ===== */
.task{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); margin-bottom:14px; scroll-margin-top:88px; overflow:hidden; transition:border-color .2s}
.task.done{border-color:rgba(63,224,138,.45)}
.task-head{display:flex; align-items:center; gap:13px; width:100%; padding:clamp(12px,1.4vw,16px) clamp(15px,2vw,24px); transition:background .15s}
.task-head:hover{background:rgba(255,255,255,.025)}
.task-badge{font-family:var(--mono); font-variant-ligatures:none; direction:ltr; font-size:.72rem; font-weight:700; color:#fff; background:var(--red-btn); padding:3px 11px; border-radius:4px; flex-shrink:0}
.task.done .task-badge{background:var(--green); color:#07230f}
.task-title{font-family:var(--head); font-weight:700; color:#fff; font-size:clamp(1.08rem,1.8vw,1.36rem); line-height:1.35; flex:1; min-width:0}
.task-count{font-family:var(--mono); font-variant-ligatures:none; direction:ltr; font-size:.76rem; color:var(--text-faint); flex-shrink:0}
.task-chev{color:var(--text-dim); transition:transform .25s; flex-shrink:0}
.task.closed .task-chev{transform:rotate(-90deg)}
.task-body{display:grid; grid-template-rows:1fr; transition:grid-template-rows .3s ease}
.task.closed .task-body{grid-template-rows:0fr}
.task-body>div{overflow:hidden; min-height:0}
.task-in{padding:2px clamp(15px,2vw,24px) clamp(17px,2vw,24px)}
.task-in>p,.task-in>ul,.task-in>ol{max-width:1020px; margin-top:11px; color:var(--text-dim)}
.task-in>p strong,.task-in li strong{color:#fff}
.task-in>ul,.task-in>ol{padding-right:21px}
.task-in li{margin-top:3px}
.task-in h3{font-size:1.1rem; margin-top:21px; font-family:var(--ar)}

/* ===== CONTENT BLOCKS ===== */
.analogy{display:flex; gap:15px; align-items:flex-start; margin-top:15px; padding:16px 19px; max-width:1020px; border-radius:8px; border:1px solid var(--line-strong); background:linear-gradient(135deg,var(--blue-dim),var(--panel2) 55%)}
.analogy>span{font-size:1.75rem; line-height:1.2}
.analogy b{display:block; font-family:var(--mono); font-variant-ligatures:none; direction:ltr; text-align:right; color:var(--blue); font-size:.72rem; letter-spacing:1px}
.analogy p{color:var(--text); font-size:.98rem; line-height:1.85}
.note{margin-top:13px; padding:12px 16px; max-width:1020px; border-radius:5px; font-size:.95rem; line-height:1.8; color:var(--text-dim); border-right:3px solid var(--c,var(--blue)); background:var(--d,var(--blue-dim))}
.note strong{color:#fff}
.note.warn{--c:var(--amber); --d:var(--amber-dim)}
.note.pro{--c:var(--red); --d:var(--red-dim)}
.note>b:first-child{color:#fff}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,265px),1fr)); gap:13px; margin-top:15px}
.card{border-radius:10px; overflow:hidden; border:1px solid var(--bd,var(--line-strong)); background:var(--panel2); display:flex; flex-direction:column; transition:transform .18s, box-shadow .18s}
.card:hover{transform:translateY(-3px); box-shadow:0 12px 26px rgba(0,0,0,.3)}
.card-head{display:flex; align-items:center; gap:11px; padding:12px 16px; background:var(--g,var(--panel3))}
.card-head>span:first-child{font-size:1.45rem; line-height:1}
.card-head b{display:block; color:#fff; font-size:1.03rem; line-height:1.35}
.card-head small{display:block; font-family:var(--mono); font-variant-ligatures:none; direction:ltr; text-align:right; font-size:.68rem; color:rgba(255,255,255,.72)}
.card-body{padding:12px 16px 15px; color:var(--text-dim); font-size:.93rem; line-height:1.7; flex:1}
.card-body strong{color:#fff}
.card-body dl{margin-top:8px; font-size:.85rem}
.card-body dt{color:var(--text-faint); font-size:.76rem; margin-top:5px}
.card-body dd{color:var(--text)}
.g-black{--g:linear-gradient(135deg,#3a4152,#0d1018); --bd:rgba(214,222,232,.3)}
.g-grey{--g:linear-gradient(135deg,#7a5a14,#1d1a12); --bd:rgba(255,194,60,.35)}
.g-white{--g:linear-gradient(135deg,#1f6aa8,#10243c); --bd:rgba(79,195,255,.35)}
.g-net{--g:linear-gradient(135deg,#2765c9,#14305f); --bd:rgba(79,195,255,.35)}
.g-web{--g:linear-gradient(135deg,#7a3fc4,#351a63); --bd:rgba(180,140,255,.35)}
.g-human{--g:linear-gradient(135deg,#c2185b,#4e0d32); --bd:rgba(255,106,160,.35)}
.g-cloud{--g:linear-gradient(135deg,#0f8f8a,#07403f); --bd:rgba(63,224,200,.35)}
.tbl{overflow-x:auto; margin-top:15px; border:1px solid var(--line-strong); border-radius:8px}
table{width:100%; border-collapse:collapse; font-size:.93rem; min-width:560px}
th{background:var(--panel3); color:#fff; font-weight:600; padding:10px 14px; text-align:right; font-size:.86rem}
td{padding:10px 14px; border-top:1px solid var(--line); color:var(--text-dim); vertical-align:top; line-height:1.6}
td strong{color:#fff}
tr:hover td{background:rgba(255,255,255,.02)}
.refs{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr)); gap:9px; margin-top:13px}
.ref{display:block; padding:11px 14px; background:var(--panel2); border-radius:8px; text-decoration:none; font-size:.9rem; line-height:1.55; color:var(--text-dim); transition:background .15s, transform .15s}
.ref:hover{background:var(--panel3); transform:translateY(-2px)}
.ref b{display:block; color:#fff}
.ref small{display:block; font-family:var(--mono); font-variant-ligatures:none; direction:ltr; text-align:right; font-size:.68rem; color:var(--blue)}
.code-wrap{margin-top:13px; border:1px solid var(--line-strong); border-radius:6px; overflow:hidden; direction:ltr; text-align:left; max-width:1020px}
.code-label{display:flex; justify-content:space-between; align-items:center; padding:6px 13px; background:var(--panel3); font-family:var(--mono); font-variant-ligatures:none; font-size:.7rem; color:var(--text-dim); letter-spacing:1px}
.copy-btn{font-family:var(--ar); font-size:.76rem; padding:2px 11px; border:1px solid var(--line-strong); border-radius:4px; color:var(--text-dim); transition:all .15s}
.copy-btn:hover{border-color:var(--red); color:#fff}
.copy-btn.ok{border-color:var(--green); color:var(--green)}
pre{background:#060a12; padding:13px 16px; overflow-x:auto; font-family:var(--mono); font-variant-ligatures:none; font-size:.84rem; line-height:1.8; color:#bdf7dc; white-space:pre-wrap}
pre[dir=rtl]{direction:rtl; text-align:right; font-family:var(--ar); font-size:.92rem; color:var(--text)}
.check-list{display:flex; flex-direction:column; gap:7px; margin-top:13px; max-width:1020px}
.check-list label{display:flex; gap:10px; align-items:flex-start; color:var(--text-dim); font-size:.95rem; line-height:1.6; cursor:pointer}
.check-list input{margin-top:6px; width:16px; height:16px; accent-color:var(--red); flex-shrink:0}
.check-list input:checked+span{color:#fff}
.takeaway{margin-top:18px; padding:clamp(18px,2.4vw,26px); border-radius:10px; border:1px solid rgba(255,68,51,.45); background:linear-gradient(135deg,var(--red-dim),transparent)}
.takeaway b{font-family:var(--mono); font-variant-ligatures:none; color:var(--red-t); font-size:.74rem; letter-spacing:1.5px; display:block; direction:ltr; text-align:right}
.takeaway p{color:var(--text); font-size:1.05rem; margin-top:5px}
.takeaway strong{color:var(--red-t)}

/* ===== QUESTIONS ===== */
.qs{margin-top:18px; border-top:1px dashed var(--line-strong); padding-top:5px}
.qs-title{font-family:var(--mono); font-variant-ligatures:none; direction:ltr; text-align:right; font-size:.7rem; color:var(--red-t); letter-spacing:1.3px; font-weight:700; margin-top:9px}
.q{padding:11px 0; border-bottom:1px solid var(--line)}
.q:last-child{border-bottom:0}
.q-text{display:flex; gap:9px; color:#fff; font-weight:600; font-size:.98rem; line-height:1.6}
.q-text b{font-family:var(--mono); font-variant-ligatures:none; color:var(--red-t); font-size:.74rem; padding-top:4px; flex-shrink:0; direction:ltr}
.q.solved .q-text b{color:var(--green)}
.q-form{display:flex; gap:7px; margin-top:7px; max-width:640px}
.q-form input{flex:1; min-width:0; background:var(--bg2); border:1px solid var(--line-strong); border-radius:7px; padding:6px 12px; color:#fff; font-size:.92rem; outline:0}
.q-form input:focus{border-color:var(--blue)}
.q-form input.bad,.opt.bad{animation:shake .35s; border-color:var(--red)}
@keyframes shake{25%{translate:-5px}50%{translate:5px}75%{translate:-3px}}
.q.solved input{border-color:var(--green); color:var(--green)}
.opts{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr)); gap:7px; margin-top:7px; max-width:1020px}
.opt{padding:8px 13px; background:var(--panel2); border:1.5px solid transparent; border-radius:7px; font-size:.93rem; line-height:1.5; transition:border-color .15s, transform .15s}
.opt:hover:not([disabled]){border-color:var(--blue); transform:translateY(-1px)}
.opt[disabled]{cursor:default; opacity:.5}
.opt.right{border-color:var(--green); background:var(--green-dim); opacity:1}
.q-foot{display:flex; gap:13px; align-items:baseline; flex-wrap:wrap; margin-top:5px}
.hint-btn{font-size:.82rem; color:var(--text-faint); text-decoration:underline; text-underline-offset:3px}
.hint-t{font-size:.87rem; color:var(--amber); line-height:1.6}
.why{font-size:.89rem; color:var(--text-dim); line-height:1.65; margin-top:6px; padding-right:11px; border-right:2px solid var(--green); max-width:1020px}

/* ===== TERMINAL ===== */
.term{display:flex; flex-direction:column; background:#060a12; border:1px solid var(--line-strong); border-radius:var(--r); overflow:hidden; direction:ltr; text-align:left; cursor:text; min-width:0}
.term-bar{display:flex; align-items:center; gap:7px; padding:9px 15px; background:var(--panel2); border-bottom:1px solid var(--line); font-family:var(--mono); font-variant-ligatures:none; font-size:.74rem; color:var(--text-faint)}
.term-bar i{width:11px; height:11px; border-radius:50%; background:var(--red)}
.term-bar i:nth-child(2){background:var(--amber)} .term-bar i:nth-child(3){background:var(--green)}
.term-bar span{margin-left:8px}
.term-out{flex:none; height:300px; min-height:0; overflow-y:auto; padding:12px 15px 4px; font-family:var(--mono); font-variant-ligatures:none; font-size:.84rem; line-height:1.7; color:#bdf7dc; scrollbar-width:thin; scrollbar-color:var(--panel3) transparent}
.term-out div{white-space:pre-wrap; word-break:break-word; min-height:1.2em}
.term-out [dir=rtl]{font-family:var(--ar); text-align:right}
.t-cmd{color:#fff} .t-ok{color:var(--green)} .t-dim{color:#7f93ad} .t-warn{color:var(--amber)} .t-red{color:#ff7d70}
.term-in{display:flex; align-items:center; gap:9px; padding:8px 15px 13px; font-family:var(--mono); font-variant-ligatures:none; font-size:.84rem}
.term-in label{color:var(--red-t); white-space:nowrap}
.term-in input{flex:1; min-width:0; background:none; border:0; outline:0; color:#fff; font:inherit; caret-color:var(--red); direction:ltr}
.term-in input::placeholder{color:#5e7088}

/* lab layout around a terminal: terminal + MISSION panel */
.lab-hud{display:flex; justify-content:space-between; align-items:center; gap:9px; margin:15px 0 10px; font-family:var(--mono); font-variant-ligatures:none; direction:ltr; font-size:.8rem; color:var(--text-dim)}
.lab-hud b{color:#fff}
.lab-hud+.inv{margin-top:0}
.lab-grid{display:grid; grid-template-columns:minmax(0,1fr) 230px; gap:13px; align-items:start}
@media(max-width:820px){ .lab-grid{grid-template-columns:minmax(0,1fr)} }
.lab-obj{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:13px 15px}
.lab-obj h4{font-family:var(--mono); font-variant-ligatures:none; direction:ltr; text-align:right; font-size:.7rem; letter-spacing:1.5px; color:var(--red-t); font-weight:700; margin-bottom:10px}
.lab-obj ul{list-style:none; display:flex; flex-direction:column; gap:9px}
.lab-obj li{display:flex; gap:9px; align-items:flex-start; font-size:.86rem; color:var(--text-dim); line-height:1.55}
.lab-obj li .bx{width:16px; height:16px; border:1.5px solid var(--line-strong); border-radius:4px; flex-shrink:0; margin-top:2px; display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--green)}
.lab-obj li.on{color:#fff} .lab-obj li.on .bx{border-color:var(--green); background:var(--green-dim)}
.lab-obj small{overflow-wrap:anywhere}
.lab-hint{margin-top:11px; font-size:.78rem; color:var(--text-faint); line-height:1.6; font-family:var(--mono); font-variant-ligatures:none; direction:ltr; text-align:right}

/* ===== ROOM END ===== */
.room-done{margin-top:18px; padding:clamp(18px,2.4vw,26px); border-radius:10px; border:1px solid rgba(63,224,138,.5); background:linear-gradient(135deg,var(--green-dim),var(--panel) 65%); display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.room-done>span{font-size:2.4rem; line-height:1}
.room-done div{flex:1 1 240px}
.room-done b{display:block; color:var(--green); font-family:var(--head); font-size:1.18rem}
.room-done p{color:var(--text-dim); font-size:.93rem}
.retake{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:9px; margin-top:13px; padding:12px 15px; background:var(--panel); border:1px solid var(--line); border-radius:8px; color:var(--text-dim); font-size:.92rem}
.art-nav{display:flex; gap:13px; flex-wrap:wrap; margin-top:16px}
.nav-btn{flex:1 1 240px; display:flex; flex-direction:column; gap:1px; padding:15px 19px; background:var(--panel); border:1px solid var(--line-strong); border-radius:9px; text-decoration:none; transition:border-color .15s, transform .15s}
.nav-btn:hover{border-color:var(--red); transform:translateY(-2px)}
.nav-btn.next{text-align:left; align-items:flex-end}
.nav-dir{font-family:var(--mono); font-variant-ligatures:none; direction:ltr; font-size:.68rem; color:var(--text-faint); letter-spacing:1px}
.nav-title{color:#fff; font-weight:700}

footer{background:var(--bg2); border-top:1px solid var(--line); padding:18px var(--gutter)}
.f-bot{display:flex; justify-content:space-between; flex-wrap:wrap; gap:7px 20px; max-width:1620px; margin:0 auto; font-family:var(--mono); font-variant-ligatures:none; direction:ltr; font-size:.7rem; color:var(--text-faint)}

#toasts{position:fixed; bottom:22px; left:22px; z-index:9000; display:flex; flex-direction:column; gap:8px; pointer-events:none; max-width:calc(100vw - 32px)}
@media(max-width:760px){ #toasts{bottom:70px; left:16px; right:16px} }
.toast{display:flex; align-items:center; gap:11px; padding:10px 16px; background:var(--panel3); border:1px solid var(--line-strong); border-right:4px solid var(--red); border-radius:9px; box-shadow:0 14px 34px rgba(0,0,0,.45); font-size:.92rem; animation:toast .3s}
.toast b{font-size:1.2rem; font-weight:400}
.toast.out{opacity:0; transition:opacity .3s}
@keyframes toast{from{opacity:0; translate:-22px 0}}
#confetti{position:fixed; inset:0; width:100%; height:100%; z-index:9600; pointer-events:none}

/* ===== EFFECTS ===== */
.snd-btn{font-size:1.05rem; line-height:1; padding:6px; border-radius:7px; transition:background .15s}
.snd-btn:hover{background:rgba(255,255,255,.07)}
.fx-rise{opacity:0; transform:translateY(16px); transition:opacity .45s ease, transform .45s ease, box-shadow .18s}
.fx-rise.fx-in{opacity:1; transform:none}
.fx-rise.fx-in.card:hover,.fx-rise.fx-in.ref:hover{transform:translateY(-3px)}
.fx-float{position:fixed; z-index:9500; pointer-events:none; translate:-50% -50%; font-family:var(--mono); font-variant-ligatures:none; font-weight:700; font-size:1.35rem; color:var(--green); text-shadow:0 2px 10px rgba(0,0,0,.7); animation:fxUp 1s ease-out forwards}
.fx-float.combo{color:var(--amber); font-size:1.05rem}
@keyframes fxUp{0%{opacity:0; transform:translateY(8px) scale(.7)}18%{opacity:1; transform:translateY(0) scale(1.15)}100%{opacity:0; transform:translateY(-62px) scale(1)}}
body.fx-hit::after{content:''; position:fixed; inset:0; z-index:9400; pointer-events:none; box-shadow:inset 0 0 90px rgba(255,68,51,.65); animation:fxHit .42s ease-out forwards}
@keyframes fxHit{from{opacity:1}to{opacity:0}}
.fx-banner{position:fixed; top:26%; left:0; right:0; z-index:9450; pointer-events:none; text-align:center; padding:15px 12px; background:linear-gradient(90deg,transparent,rgba(21,29,46,.97) 22%,rgba(21,29,46,.97) 78%,transparent); border-block:2px solid var(--green); animation:fxSweep 1.7s ease forwards}
.fx-banner b{display:block; font-family:var(--mono); font-variant-ligatures:none; color:var(--green); letter-spacing:4px; font-size:clamp(1.1rem,3vw,1.8rem)}
.fx-banner span{color:#fff; font-size:.98rem}
@keyframes fxSweep{0%{opacity:0; transform:translateX(70px) skewX(-10deg)}14%{opacity:1; transform:none}82%{opacity:1; transform:none}100%{opacity:0; transform:translateX(-70px) skewX(10deg)}}
/* ----- room complete: the big celebration ----- */
.fx-win{--fxc:#ff4433; --fxc2:#ffc23c; --fxglow:rgba(255,68,51,.45); position:fixed; inset:0; z-index:9550; display:flex; align-items:center; justify-content:center; padding:16px; overflow:hidden; background:radial-gradient(circle at 50% 46%,rgba(40,14,12,.78),rgba(4,7,13,.94) 62%); backdrop-filter:blur(5px); animation:fxFade .35s ease-out}
.fx-win.gold{--fxc:#ffc23c; --fxc2:#fff1b8; --fxglow:rgba(255,194,60,.5); background:radial-gradient(circle at 50% 46%,rgba(48,34,6,.8),rgba(4,7,13,.94) 62%)}
.fx-win.gold .fx-emblem .core{background:radial-gradient(circle at 34% 28%,#fff6d6 0%,var(--fxc) 45%,#8a5a00 100%)}
.fx-win.out{animation:fxFadeOut .35s ease-in forwards}
@keyframes fxFade{from{opacity:0}}
@keyframes fxFadeOut{to{opacity:0}}
.fx-fw{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.fx-rays{position:absolute; left:50%; top:46%; width:1500px; height:1500px; margin:-750px 0 0 -750px; pointer-events:none; opacity:0; border-radius:50%;
  background:repeating-conic-gradient(from 0deg,var(--fxglow) 0deg 7deg,transparent 7deg 22deg);
  -webkit-mask:radial-gradient(circle,#000 8%,transparent 58%); mask:radial-gradient(circle,#000 8%,transparent 58%);
  animation:fxRaysIn .9s .15s ease-out forwards, fxSpin 26s linear infinite}
@keyframes fxRaysIn{to{opacity:.55}}
@keyframes fxSpin{to{transform:rotate(360deg)}}
.fx-win-box{position:relative; width:min(470px,100%); text-align:center; padding:clamp(24px,4vw,36px) clamp(18px,4vw,34px) clamp(20px,3vw,28px); border-radius:20px;
  background:linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,0) 40%),linear-gradient(160deg,#1d2438,#121a2b 70%);
  border:1.5px solid color-mix(in srgb,var(--fxc) 70%,transparent);
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 24px 80px rgba(0,0,0,.6),0 0 90px var(--fxglow);
  animation:fxPop .7s cubic-bezier(.2,1.5,.45,1) both}
.fx-win-box::before{content:''; position:absolute; inset:-2px; border-radius:21px; padding:2px; pointer-events:none;
  background:conic-gradient(from var(--fxa,0deg),transparent 0 70%,var(--fxc2) 80%,var(--fxc) 88%,transparent 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:fxBorder 3.2s linear infinite}
@property --fxa{syntax:'<angle>'; inherits:false; initial-value:0deg}
@keyframes fxBorder{to{--fxa:360deg}}
@keyframes fxPop{0%{transform:translateY(40px) scale(.6); opacity:0}60%{opacity:1}100%{transform:none; opacity:1}}
.fx-emblem{position:relative; width:128px; height:128px; margin:-6px auto 4px; display:grid; place-items:center}
.fx-emblem svg{position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); overflow:visible}
.fx-emblem .rg{fill:none; stroke:rgba(255,255,255,.08); stroke-width:6}
.fx-emblem .rf{fill:none; stroke:url(#fxGrad); stroke-width:6; stroke-linecap:round; stroke-dasharray:352; stroke-dashoffset:352; filter:drop-shadow(0 0 8px var(--fxc)); animation:fxRing 1.1s .35s cubic-bezier(.6,0,.2,1) forwards}
@keyframes fxRing{to{stroke-dashoffset:0}}
.fx-emblem .core{width:92px; height:92px; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 34% 28%,#ffb3a8 0%,var(--fxc) 42%,#7a1208 100%); box-shadow:0 0 40px var(--fxglow),inset 0 -8px 18px rgba(0,0,0,.35); animation:fxCore .8s .25s cubic-bezier(.2,1.8,.4,1) both}
@keyframes fxCore{0%{transform:scale(0) rotate(-120deg)}100%{transform:none}}
.fx-win-ico{font-size:3.1rem; line-height:1; filter:drop-shadow(0 4px 10px rgba(0,0,0,.45)); animation:fxFloat 2.6s 1.1s ease-in-out infinite}
@keyframes fxFloat{50%{transform:translateY(-6px) rotate(-4deg)}}
.fx-emblem .spark{position:absolute; width:8px; height:8px; border-radius:50%; background:var(--fxc2); box-shadow:0 0 10px var(--fxc2); opacity:0; animation:fxSpark 1.6s ease-out infinite}
@keyframes fxSpark{0%{opacity:0; transform:translate(0,0) scale(.4)}20%{opacity:1}100%{opacity:0; transform:translate(var(--dx),var(--dy)) scale(1)}}
.fx-kicker{font-family:var(--mono); font-variant-ligatures:none; font-size:.72rem; font-weight:700; letter-spacing:4px; color:var(--fxc); direction:ltr; opacity:0; animation:fxRise .5s .55s ease-out forwards}
.fx-win-box>b{display:block; font-family:var(--head); font-size:clamp(1.5rem,4.4vw,1.9rem); margin-top:4px; line-height:1.3;
  background:linear-gradient(100deg,#fff 0%,#fff 38%,var(--fxc2) 50%,#fff 62%,#fff 100%); background-size:250% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:0; animation:fxRise .55s .65s ease-out forwards, fxShine 2.8s 1.3s ease-in-out infinite}
@keyframes fxShine{0%{background-position:100% 0}60%,100%{background-position:-50% 0}}
@keyframes fxRise{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
.fx-win-box p{color:var(--text-dim); opacity:0; animation:fxRise .5s .8s ease-out forwards}
.fx-stars{display:flex; justify-content:center; gap:10px; margin:12px 0 2px; direction:ltr}
.fx-stars i{font-style:normal; font-size:2rem; line-height:1; color:var(--fxc2); text-shadow:0 0 16px var(--fxc2); opacity:0; transform:scale(0) rotate(-60deg); animation:fxStar .55s cubic-bezier(.2,1.9,.4,1) forwards}
.fx-stars i:nth-child(1){animation-delay:1.05s} .fx-stars i:nth-child(2){animation-delay:1.3s; font-size:2.5rem; margin-top:-6px} .fx-stars i:nth-child(3){animation-delay:1.55s}
@keyframes fxStar{to{opacity:1; transform:none}}
.fx-win-pts{font-family:var(--mono); font-variant-ligatures:none; font-weight:700; font-size:clamp(2.2rem,7vw,2.8rem); color:var(--green); direction:ltr; line-height:1.25; text-shadow:0 0 22px rgba(63,224,138,.45); opacity:0; animation:fxRise .5s 1.7s ease-out forwards}
.fx-win-pts small{font-family:var(--ar); font-size:.95rem; color:var(--text-dim); font-weight:400; text-shadow:none}
.fx-win-acts{display:flex; gap:9px; justify-content:center; flex-wrap:wrap; margin-top:14px; opacity:0; animation:fxRise .5s 1.95s ease-out forwards}
.fx-win-acts .btn-red{box-shadow:0 8px 26px var(--fxglow)}
.fx-win.gold .fx-win-acts .btn-red{background:linear-gradient(135deg,#ffcf5a,#e09a12); color:#2a1a00}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
  .fx-kicker,.fx-win-box>b,.fx-win-box p,.fx-stars i,.fx-win-pts,.fx-win-acts{opacity:1 !important; transform:none !important}
  .fx-win-box>b{color:#fff; background:none}
  .fx-emblem .rf{stroke-dashoffset:0}
  .fx-rays{opacity:.35}
}

/* ===== visitors and the plan offer (hosted platform) ===== */
.guest-bar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; margin-bottom:18px; padding:12px 16px; border-radius:12px; background:linear-gradient(135deg,rgba(79,195,255,.1),var(--panel) 70%); border:1px solid rgba(79,195,255,.35); font-size:.94rem; color:var(--text-dim)}
.guest-bar b{color:#fff}
.guest-dlg{margin:auto; border:1px solid var(--line-strong); border-radius:16px; background:var(--panel); color:var(--text); padding:0; width:min(420px,calc(100vw - 32px)); direction:rtl; text-align:center}
.guest-dlg::backdrop{background:rgba(4,8,16,.72)}
.guest-in{position:relative; padding:28px 24px 22px; display:flex; flex-direction:column; align-items:center; gap:10px}
.guest-ico{width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.7rem; background:rgba(79,195,255,.12); border:1px solid rgba(79,195,255,.4)}
.guest-in h2{font-size:1.25rem; color:#fff}
.guest-in p{color:var(--text-dim); font-size:.95rem; line-height:1.8}
.guest-acts{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:4px}
.guest-x{position:absolute; top:10px; left:12px; color:var(--text-faint); font-size:1rem; padding:4px 8px}
.guest-x:hover{color:#fff}
.room-done.offer{border-color:rgba(255,194,60,.55); background:linear-gradient(135deg,rgba(255,194,60,.1),var(--panel) 65%)}
.offer-acts{display:flex; flex-wrap:wrap; gap:8px}