:root{
  --bg:#0b1020;--bg2:#0c142b;--panel:#141e35;--panel2:#17243f;--line:#2a3854;--line2:#3a4a68;
  --text:#e9efff;--muted:#8f9db8;--soft:#aab8d4;--blue:#4e8df2;--violet:#9b66ef;--focus:#bcb1ff;
  --ok:#7fe5be;--okbg:#1b423d;--warn:#ffd49a;--warnbg:#4a3428;--bad:#ffb7aa;--badbg:#4a2630;--info:#a9c4ff;--infobg:#22345d;
  --radius:16px;
  font-family:"Segoe UI",Tahoma,system-ui,-apple-system,"Noto Sans Arabic",sans-serif;color:var(--text);background:var(--bg);color-scheme:dark;font-synthesis:none
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 80% -10%,#273c77 0,transparent 35%),var(--bg);line-height:1.6}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ltr{direction:ltr;unicode-bidi:isolate}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;display:inline-block}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:100vh}
.sidebar{background:var(--bg2);border-inline-end:1px solid #283653;padding:26px 18px;display:flex;flex-direction:column;gap:22px;position:sticky;top:0;height:100vh}
.logo{display:flex;gap:12px;align-items:center}
.mark{width:44px;height:44px;object-fit:contain;flex:none}
.logo strong{display:block;font-size:18px;letter-spacing:-.4px}.logo small{display:block;color:var(--muted);font-size:11px;letter-spacing:1.5px}
.nav{display:grid;gap:6px}
.nav a{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;color:var(--soft);text-decoration:none;font-size:15px}
.nav a:hover{background:#18264a}
.nav a[aria-current="page"]{color:#fff;background:#23345c}
.nav .ico{width:20px;text-align:center;opacity:.9}
.nav .badge{margin-inline-start:auto;background:var(--warnbg);color:var(--warn);border-radius:20px;padding:0 8px;font-size:12px;min-width:22px;text-align:center}
.sidefoot{margin-top:auto;border-top:1px solid #263453;padding-top:16px;font-size:13px;color:#9daecc;display:grid;gap:8px}
.sidefoot b{color:var(--text)}
.main{padding:28px 32px 48px;max-width:1400px;width:100%;margin-inline:auto;min-width:0}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.topbar h1{margin:0 0 4px;font-size:clamp(24px,3vw,34px);letter-spacing:-.5px}
.topbar p{margin:0;color:var(--soft)}
.pill{display:inline-flex;align-items:center;gap:6px;border:1px solid #735e31;color:#ffd98d;background:#493a23;padding:7px 12px;border-radius:100px;font-size:12px;font-weight:700}
.pill.live{border-color:#2f6a5a;color:var(--ok);background:#12332f}

/* ---------- primitives ---------- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:0 12px 28px #02061722;margin-bottom:18px}
.panel>.head,.head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.head h2{margin:0;font-size:18px}.head small{color:var(--muted)}
.grid{display:grid;gap:14px}
.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
.split{display:grid;grid-template-columns:1.35fr 1fr;gap:18px;align-items:start}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;display:block;color:inherit;text-decoration:none;text-align:start;width:100%}
a.card:hover,button.card:hover{border-color:#4a5f8e}
.card span{color:#a1afc9;font-size:13px}.card b{display:block;font-size:32px;margin-top:6px;letter-spacing:-1px}.card small{color:var(--muted);font-size:12px}
.card.alert b{color:var(--warn)}.card.good b{color:var(--ok)}
.muted{color:var(--muted)}.small{font-size:13px}
.empty{color:#9aacca;text-align:center;padding:26px 10px}
.notice{background:#1b2740;color:#aebfe0;border:1px dashed #4b6089;border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.8}
.notice.warn{border-color:#735e31;background:#2c2a22;color:#ffe3ad}
.notice.bad{border-color:#7a3a46;background:#2b1b22;color:var(--bad)}

.btn{border:1px solid #405173;background:#243450;color:#e5efff;border-radius:10px;padding:8px 14px;font-size:14px}
.btn:hover{background:#2c3f63}
.btn.primary{border:0;background:linear-gradient(100deg,var(--blue),var(--violet));color:#fff;font-weight:700}
.btn.primary:hover{filter:brightness(1.08)}
.btn.good{background:#1d4a3f;border-color:#2f6a5a;color:var(--ok)}
.btn.danger{background:#4a2630;border-color:#7a3a46;color:var(--bad)}
.btn.sm{padding:5px 10px;font-size:13px;border-radius:8px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btns{display:flex;gap:8px;flex-wrap:wrap}

.tag{display:inline-block;padding:3px 10px;border-radius:30px;font-size:12px;background:#283956;color:#c4d7f4;white-space:nowrap}
.tag.ok{background:var(--okbg);color:var(--ok)}.tag.warn{background:var(--warnbg);color:var(--warn)}
.tag.bad{background:var(--badbg);color:var(--bad)}.tag.info{background:var(--infobg);color:var(--info)}.tag.idle{background:#2b3852;color:#b6c2d9}

/* ---------- forms ---------- */
label{display:block;font-size:13px;color:var(--soft);margin:12px 0 6px}
input,select,textarea{width:100%;min-width:0;border:1px solid var(--line2);background:#0f1a31;color:#eff4ff;border-radius:10px;padding:10px 12px}
textarea{min-height:84px;resize:vertical}
input[type=checkbox]{width:auto}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hint{font-size:12px;color:var(--muted);margin-top:4px}

.actions-box{display:grid;gap:12px;margin-top:16px}
.act{background:#111b33;border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:grid;gap:10px}
.act strong{font-size:15px}.act p{margin:0}.act label{margin:2px 0 0}
dialog h3{font-size:15px;margin:20px 0 10px}
/* ---------- office (tower cut-away) ---------- */
.stagewrap{margin:18px 0;border:2px solid #2a3a63;border-radius:18px;overflow:hidden;background:#070d1f}
.stage{position:relative;width:100%;aspect-ratio:100/112;container-type:inline-size;direction:ltr;background:#070d1f;overflow:hidden}
.sky{position:absolute;inset:0;background:radial-gradient(circle at 80% 12%,#2a3d7a55,transparent 40%),linear-gradient(#0a1230,#101c40 60%,#1a2750)}
.moon{position:absolute;right:12%;top:6%;width:5cqw;height:5cqw;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff7d6,#e8d48a);box-shadow:0 0 3cqw #ffe9a066}
.star{position:absolute;background:#fff;border-radius:50%;width:.5cqw;height:.5cqw;opacity:.8}
.skyline{position:absolute;background:linear-gradient(#0d1632,#0a1128);border:1px solid #1d2b52}
.skyline::before{content:"";position:absolute;inset:6% 18%;background:repeating-linear-gradient(0deg,#ffd98d33 0 .5cqw,transparent .5cqw 1.6cqw)}
.tower{position:absolute;border-radius:1.2cqw;background:linear-gradient(#18244a,#0f1833);border:.5cqw solid #3a4d82;box-shadow:0 0 5cqw #4e8df233}
.roof{position:absolute;border-radius:1cqw 1cqw 0 0;background:linear-gradient(#24356a,#18244a);border:.4cqw solid #3a4d82}
.antenna{position:absolute;background:#9fb4e6;border-radius:1cqw}
.antenna::after{content:"";position:absolute;top:-.5cqw;left:-.4cqw;width:1.4cqw;height:1.4cqw;border-radius:50%;background:#ff6b6b;animation:blink 1.4s infinite}
.roofsign{position:absolute;display:flex;align-items:center;justify-content:center;gap:1cqw;font-weight:800;font-size:max(11px,2.4cqw);letter-spacing:.2cqw;color:#fff;text-shadow:0 0 1.2cqw #9b66ef;direction:ltr;z-index:3}
.roofsign img{width:3cqw;height:3cqw}
.slab{position:absolute;background:#3a4d82}
.shaft{position:absolute;background:repeating-linear-gradient(0deg,#0a1229 0 1.2cqw,#0e1833 1.2cqw 2.4cqw);border-inline:.35cqw solid #5a78bd;z-index:1}
.car{position:absolute;transform:translateY(-100%);background:linear-gradient(#cdd8f2,#9fb0d8);border:.3cqw solid #5a78bd;border-radius:.6cqw;z-index:2;transition-property:top;transition-timing-function:linear;opacity:.9}
.car::after{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:.2cqw solid #5a78bd}
.lobby{position:absolute;background:linear-gradient(#2a3a63,#1e2b4d);border-top:.4cqw solid #5a78bd;display:flex;align-items:center;justify-content:space-between;padding:0 3cqw;font-size:max(9px,1.3cqw);color:#cfe0ff;direction:rtl}
.lobby .plant{position:static;font-size:2.8cqw}
.room{position:absolute;overflow:visible;background:linear-gradient(var(--w1),var(--w2));border:.25cqw solid var(--bd);--w1:#1b2748;--w2:#141d38;--bd:#34477a}
.room::after{content:"";position:absolute;left:0;right:0;bottom:0;height:9%;background:var(--fl);--fl:#33466f}
.room.gold{--w1:#3d3220;--w2:#2a2214;--bd:#8a7336;--fl:#6b5a2a}
.room.violet{--w1:#2c2358;--w2:#1e1840;--bd:#6a50b0;--fl:#4a3a86}
.room.blue{--w1:#1d3862;--w2:#142a4c;--bd:#4574c2;--fl:#2f5496}
.room.pink{--w1:#4d243e;--w2:#361a2c;--bd:#b24c82;--fl:#7a3258}
.room.teal{--w1:#164650;--w2:#0f333b;--bd:#33a09b;--fl:#1f7470}
.room.orange{--w1:#4d3318;--w2:#37240f;--bd:#c07a35;--fl:#8a5424}
.room.green{--w1:#1c4430;--w2:#143523;--bd:#3b9a63;--fl:#27704a}
.window{position:absolute;top:22%;width:20%;height:26%;border-radius:.5cqw;background:linear-gradient(#274a8a,#16294f);border:.25cqw solid #8aa4e0;opacity:.85}
.window.w1{left:6%}.window.w2{right:6%}
.roomlabel{position:absolute;inset-inline-start:.6cqw;top:.5cqw;display:flex;gap:.4cqw;align-items:center;font-size:max(9px,1.3cqw);font-weight:700;color:#e3ebff;direction:rtl;background:#0a1226cc;padding:.15cqw .8cqw;border-radius:2cqw;z-index:2}
.desk{position:absolute;width:26%;height:7%;border-radius:.4cqw;background:#7a5430;border:.2cqw solid #3a2812;z-index:1}
.desk .monitor{position:absolute;left:50%;top:-230%;width:46%;height:200%;transform:translateX(-50%);background:#0b1226;border:.25cqw solid #8aa4e0;border-radius:.3cqw;box-shadow:0 0 1cqw #4e8df266}
.plant{position:absolute;right:3%;bottom:10%;font-size:2.8cqw}
.table{position:absolute;left:50%;top:75%;width:70%;height:11%;transform:translate(-50%,-50%);border-radius:.8cqw;background:linear-gradient(#8a6038,#6a4725);border:.3cqw solid #3a2812;box-shadow:0 .5cqw 1cqw #0008;z-index:1}
.screen{position:absolute;left:50%;top:24%;transform:translateX(-50%);width:30%;height:16%;background:#0b1226;border:.3cqw solid #8e7fd0;border-radius:.4cqw;font-size:max(8px,.95cqw);color:#a99be6;display:grid;place-items:center;z-index:1}
.counter{position:absolute;left:50%;top:30%;transform:translateX(-50%);width:62%;background:#0b1226e6;border:.25cqw solid #caa45a;border-radius:.8cqw;padding:.5cqw .8cqw;display:grid;gap:.3cqw;color:#ffe6ae;text-decoration:none;font-size:max(9px,1.2cqw);text-align:center;direction:rtl;z-index:2}
.counter:hover{background:#16224a}.counter b{font-size:max(14px,2.6cqw);color:#fff}
.cabinet{position:absolute;right:5%;bottom:10%;font-size:3.4cqw}
.person{position:absolute;width:auto;transform:translate(-50%,-100%);background:none;border:0;padding:0;display:grid;justify-items:center;cursor:pointer;transition-property:left,top;transition-timing-function:linear;z-index:6;direction:rtl}
.person .figure{display:block;width:4.2cqw;transition:transform .2s}
.person.flip .figure{transform:scaleX(-1)}
.person .char{width:100%;height:auto;display:block;overflow:visible;filter:drop-shadow(0 .5cqw .4cqw #0009)}
.person:hover .figure,.person:focus-visible .figure{transform:translateY(-.4cqw) scale(1.1)}
.person.flip:hover .figure{transform:translateY(-.4cqw) scaleX(-1) scale(1.1)}
.nametag{font-size:max(8px,1.05cqw);font-weight:700;background:#0b1226e6;padding:0 .6cqw;border-radius:1cqw;white-space:nowrap;margin-top:.1cqw}
.statetag{font-size:max(7px,.88cqw);color:var(--muted);background:#0b1226cc;padding:0 .5cqw;border-radius:1cqw;white-space:nowrap}
.person.working .statetag{color:var(--ok)}.person.working .char .eye{animation:blink 1s infinite}
.person.working::after{content:"⌨️";position:absolute;top:-1.5cqw;inset-inline-end:-.8cqw;font-size:1.8cqw;animation:bob .8s infinite}
.person.blocked .statetag{color:var(--bad)}.person.waiting .statetag{color:var(--warn)}.person.meeting .statetag{color:#c9b8ff}
.person.blocked::after{content:"⛔";position:absolute;top:-1.5cqw;inset-inline-end:-.8cqw;font-size:1.8cqw}
.person.waiting::after{content:"⏳";position:absolute;top:-1.5cqw;inset-inline-end:-.8cqw;font-size:1.8cqw}
.person.offline .char,.person.off .char{filter:grayscale(.85) brightness(.7)}
.person.offline .statetag::before{content:"💤 "}
.person.riding{z-index:3}
.bubble{position:absolute;bottom:100%;margin-bottom:.2cqw;background:#fffbe8;color:#222;border-radius:.8cqw;padding:.2cqw .7cqw;font-size:max(8px,1.05cqw);white-space:nowrap;max-width:16cqw;overflow:hidden;text-overflow:ellipsis;z-index:9;box-shadow:0 .3cqw .8cqw #0008;direction:rtl}
.bubble.task{background:#e9f0ff}.bubble.chat{background:#fff;font-weight:700;z-index:10}
.stage.demo .bubble.task{display:none}
.stage.demo .person .statetag{color:#ffd98d}
.walking .leg.l{animation:stepl .4s infinite}.walking .leg.r{animation:stepr .4s infinite}
.walking .figure{animation:bob .4s infinite}
@keyframes stepl{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes stepr{0%,100%{transform:translateY(-3px)}50%{transform:translateY(0)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.5cqw)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
/* ---------- lists ---------- */
.row{display:flex;align-items:center;gap:12px;padding:13px 0;border-top:1px solid #293752}
.row:first-child{border-top:0}
.row .body{flex:1;min-width:0}
.row .body strong{display:block;font-size:14px;overflow-wrap:anywhere}
.row .body small{display:block;color:#8e9fbe;margin-top:3px}
.row.click{cursor:pointer}.row.click:hover{background:#18264a;margin-inline:-10px;padding-inline:10px;border-radius:10px}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.chip{border:1px solid #33456b;background:#18264a;color:var(--soft);border-radius:30px;padding:6px 14px;font-size:13px}
.chip[aria-pressed="true"]{background:#2b4177;color:#fff;border-color:#5a78bd}
.bars{display:grid;gap:10px}
.bar{display:grid;grid-template-columns:110px 1fr 34px;align-items:center;gap:10px;font-size:13px}
.bar .track{height:10px;border-radius:8px;background:#0f1a31;overflow:hidden}
.bar .fill{height:100%;border-radius:8px;background:linear-gradient(90deg,var(--blue),var(--violet));width:0}
.kv{display:grid;grid-template-columns:150px 1fr;gap:8px 14px;font-size:14px;margin:0}
.kv dt{color:var(--muted)}.kv dd{margin:0;overflow-wrap:anywhere}
.steps{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.step{font-size:12px;padding:4px 10px;border-radius:20px;background:#1a2745;color:#8ea0c4}
.step.done{background:var(--okbg);color:var(--ok)}.step.now{background:var(--infobg);color:var(--info);outline:1px solid #5a78bd}.step.stop{background:var(--badbg);color:var(--bad)}
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.timeline li{border-inline-start:2px solid #3a4a68;padding-inline-start:12px;font-size:13px}
.timeline small{color:var(--muted);display:block}
table.t{width:100%;border-collapse:collapse;font-size:14px}
table.t th{color:var(--muted);font-weight:600;text-align:start;padding:8px 10px;border-bottom:1px solid var(--line)}
table.t td{padding:11px 10px;border-bottom:1px solid #223050;vertical-align:top}
.tablewrap{overflow-x:auto}

/* ---------- dialog / toast ---------- */
dialog{border:1px solid var(--line2);border-radius:20px;background:var(--panel);color:var(--text);padding:0;width:min(680px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto}
dialog::backdrop{background:#030612cc}
.dlg-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:1}
.dlg-head h2{margin:0;font-size:18px}
.dlg-body{padding:18px 20px 22px}
.toasts{margin:0;border:0;padding:0;background:none;color:inherit;overflow:visible;position:fixed;inset:auto;inset-block-end:18px;inset-inline-start:18px;width:max-content;display:grid;gap:8px;z-index:50;max-width:min(420px,calc(100vw - 36px))}
.toast{background:#1b2a4d;border:1px solid #4a5f8e;border-radius:12px;padding:12px 16px;box-shadow:0 10px 30px #0008;font-size:14px}
.toast.bad{background:#35202a;border-color:#7a3a46;color:var(--bad)}.toast.ok{background:#173a36;border-color:#2f6a5a;color:var(--ok)}

/* ---------- login ---------- */
.auth{min-height:100vh;display:grid;place-items:center;padding:22px}
.authbox{width:min(100%,460px);background:var(--panel);border:1px solid #344663;border-radius:22px;padding:30px;box-shadow:0 20px 60px #0004}
.authbox h1{margin:12px 0 8px;font-size:25px}
.userpick{display:grid;gap:10px;margin:16px 0}
.userpick button{text-align:start;padding:14px 16px;border-radius:12px;border:1px solid #405173;background:#1a2745;font-size:15px}
.userpick button:hover{background:#243a68}

.loading{padding:40px;text-align:center;color:var(--muted)}
.skip{position:absolute;inset-inline-start:8px;top:-60px;background:#fff;color:#000;padding:8px 12px;border-radius:8px;z-index:60}
.skip:focus{top:8px}

/* ---------- responsive ---------- */
@media(max-width:1100px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .sidebar{position:static;height:auto;min-width:0;flex-direction:row;align-items:center;flex-wrap:wrap;padding:12px 16px;gap:10px}
  .nav{display:flex;overflow-x:auto;flex:1 1 100%;max-width:100%;order:3;padding-bottom:4px}
  .nav a{white-space:nowrap}
  .sidefoot{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;border:0;padding:0;margin:0 auto 0 0;gap:8px;order:2;font-size:12px}
  .sidefoot .roleline{display:none}
  .g4{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:1fr}
  .main{padding:18px 16px 40px}
}
@media(max-width:640px){
  .g3,.g2,.field-row{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr}.kv dt{margin-top:6px}
  .bar{grid-template-columns:90px 1fr 30px}
  .row{flex-wrap:wrap}
  .card b{font-size:26px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.qrbox{display:grid;place-items:center;background:#fff;border-radius:14px;padding:12px;width:max-content;margin:10px auto}
.secretbox{background:#0f1a31;border:1px dashed var(--line2);border-radius:10px;padding:10px;font-family:ui-monospace,monospace;word-break:break-all;user-select:all;margin:6px 0 10px}