:root{--ink:#1f2937;--mut:#6b7280;--line:#e5e7eb;--bg:#f6f7f9;--pri:#1f3864;--soft:#eef3fb;font-family:Cairo,Tahoma,Arial,sans-serif;color:var(--ink);background:var(--bg)}*{box-sizing:border-box}body{margin:0}header{min-height:88px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:18px 6vw;gap:16px}.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--pri)}.brand>b{display:grid;place-items:center;width:50px;height:50px;border-radius:12px;background:var(--pri);color:#fff;font-size:20px;letter-spacing:1px}.brand span{font-weight:700}.brand small{display:block;font-weight:400;color:var(--mut);font-size:12px;margin-top:5px}.badge{padding:7px 12px;background:var(--soft);border-radius:20px;font-size:12px;color:var(--pri);white-space:nowrap}main{max-width:1050px;margin:90px auto 65px;padding:0 30px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:65px}.eyebrow{font-size:11px;letter-spacing:1.6px;color:var(--mut)}h1{font-size:35px;color:var(--pri);margin:18px 0}p{line-height:1.9;font-size:14px}.intro>p{color:var(--mut)}.roles{display:flex;gap:9px;margin:30px 0}.roles span{background:white;border:1px solid var(--line);padding:8px 16px;border-radius:7px;font-size:13px}.note{font-size:12px!important}.card{padding:34px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 35px #1f386407}h2{margin:0 0 8px;font-size:23px}.muted{color:var(--mut)}label{display:block;font-size:13px;margin:23px 0 8px}input{width:100%;border:1px solid #cfd4dc;border-radius:6px;padding:12px;font:inherit;font-size:15px;min-width:0}input:focus,button:focus-visible{outline:3px solid #b8cae8;outline-offset:2px}button{cursor:pointer;font:inherit;border-radius:6px}.password{display:flex;border:1px solid #cfd4dc;border-radius:6px;overflow:visible}.password input{border:0}.password button{border:0;background:white;color:var(--pri);padding:0 12px;font-size:12px}.primary{border:0;width:100%;background:var(--pri);color:white;padding:13px;margin-top:25px;font-weight:700}.primary:disabled{opacity:.5;cursor:not-allowed}.help{font-size:12px;color:var(--mut);text-align:center;margin:20px 0 0}#status{font-size:12px;color:#a52626;margin-bottom:0}#status:empty{display:none}.success{display:inline-block;color:#188038;background:#eaf5ed;padding:6px 10px;border-radius:5px;margin-bottom:18px;font-size:12px}footer{text-align:center;color:var(--mut);font-size:11px;padding:20px}[hidden]{display:none!important}@media(max-width:700px){header{padding:14px 20px}.brand span{font-size:12px}.brand small{font-size:10px}.badge{font-size:10px}main{grid-template-columns:1fr;gap:24px;margin:32px auto;padding:0 20px}.intro h1{font-size:28px}.intro .roles,.intro .note{display:none}.card{padding:25px}.eyebrow{font-size:9px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
[hidden]{display:none!important}body.workspace-open main{display:none}body.workspace-open #workspace{display:block}#workspace{margin:0 auto;max-width:1800px}#connection,#queue-status{padding:4px 16px;font-size:12px;direction:rtl}body.workspace-open header{padding:8px 16px}body.workspace-open footer{margin:0}#screen{display:block;background:#f6f7f9}

.brand-logo{width:88px;height:64px;object-fit:cover;flex:none}.login-logo{display:block;width:260px;height:190px;object-fit:cover;margin:0 0 18px auto}.intro{min-width:0}main{margin-top:48px}@media(max-width:700px){.brand-logo{width:68px;height:50px}.login-logo{width:190px;height:138px;margin:0 auto 14px}.intro{text-align:center}main{margin-top:24px}.intro h1{margin:8px 0}.intro>p{margin:6px 0}}
.reason-backdrop{position:fixed;inset:0;z-index:100000;background:#16243b66;display:grid;place-items:center;padding:20px}.reason-dialog{background:#fff;border-radius:14px;padding:26px;width:min(460px,100%);box-shadow:0 12px 50px #0003}.reason-dialog h2{margin:0}.reason-dialog label{display:block;margin:16px 0 8px}.reason-dialog textarea{width:100%;font:inherit;padding:12px;border:1px solid #cfd4dc;border-radius:8px}.reason-dialog button{margin:16px 0 0 10px;padding:10px 18px;border:0;border-radius:8px;background:#1f3864;color:white;font:inherit}.reason-dialog [data-cancel]{background:#e8eaed;color:#1f2937}

body.workspace-open>header,body.workspace-open>footer{display:none}
.workbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:6px 12px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 1px 4px rgba(0,0,0,.05)}
.wb-logo{width:44px;height:32px;object-fit:cover}
.wb-tabs{display:flex;gap:4px;background:var(--soft);padding:3px;border-radius:10px}
.wb-tab{border:0;background:transparent;padding:7px 16px;border-radius:8px;font:inherit;font-weight:700;color:var(--pri);cursor:pointer}
.wb-tab:hover{background:#fff}.wb-tab.active{background:var(--pri);color:#fff}
.wb-name{font-weight:700;color:var(--ink);white-space:nowrap}
.wb-conn{width:10px;height:10px;border-radius:50%;background:#16a34a;flex:none;margin-inline-start:auto}
.wb-conn.off{background:#f59e0b}
.wb-logout{border:0;background:#dc2626;color:#fff;padding:7px 14px;border-radius:8px;font:inherit;font-weight:700;cursor:pointer;white-space:nowrap}.wb-logout:hover{background:#b91c1c}
.wb-screen{display:block;width:100%;height:calc(100vh - 46px);border:0}
#queue-status:empty{display:none}
select#username{width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff}
@media(max-width:640px){.wb-name{display:none}.wb-tab{padding:7px 10px}}
/* 2026-11-04 responsive workbar: phone / tablet / desktop */
body.workspace-open #workspace{max-width:none!important;width:100%;margin:0}
body.workspace-open{margin:0;padding:0}
.workbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.workbar::-webkit-scrollbar{display:none}
.wb-tabs{flex:0 0 auto}
.wb-tab,.wb-logout,.wb-name{white-space:nowrap;flex:0 0 auto}
@media(max-width:1024px){.workbar{gap:8px;padding:5px 8px}.wb-tab{padding:6px 10px;font-size:13.5px}.wb-logout{padding:6px 10px;font-size:13.5px}.wb-name{font-size:13px}}
@media(max-width:640px){
 .workbar{gap:6px;padding:4px 6px}
 .wb-logo,.wb-name{display:none!important}
 .wb-tabs{padding:2px;gap:2px}
 .wb-tab{padding:6px 8px;font-size:13px}
 .wb-logout{font-size:0;padding:6px 10px}.wb-logout::before{content:"⎋ خروج";font-size:13px}
 .wb-screen{height:calc(100vh - 40px);height:calc(100dvh - 40px)}
}
@supports(height:100dvh){.wb-screen{height:calc(100dvh - 46px)}}