:root{--bg:#f4f6fb;--sf:#fff;--bd:#e4e8f0;--tx:#0f172a;--mu:#64748b;--pr:#4f46e5;--pr2:#eef0ff;--gr:#16a34a;--gr2:#e8f7ee;--rd:#dc2626;--rd2:#fdeceb;--sh:0 1px 2px #0f172a0d,0 8px 24px #0f172a10;--r:14px}
*{box-sizing:border-box}html,body{margin:0}
body{font-family:Vazirmatn,Tahoma,system-ui,sans-serif;background:var(--bg);color:var(--tx);font-size:14.5px;line-height:1.6;-webkit-tap-highlight-color:transparent}
a{color:var(--pr);text-decoration:none}.mu{color:var(--mu);font-size:.85rem}.ltr{direction:ltr;display:inline-block}.na{display:none!important}
.svg{display:block;flex:none}label{display:block;font-size:.82rem;color:var(--mu);margin:10px 0 2px}
input,select{width:100%;height:42px;padding:0 12px;border-radius:10px;border:1px solid var(--bd);background:#fff;color:var(--tx);font:inherit;outline:0;transition:.15s}
input:focus,select:focus{border-color:var(--pr);box-shadow:0 0 0 3px #4f46e51f}input[type=file]{padding:8px 10px;height:auto}input[type=color]{width:34px;height:30px;padding:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:42px;padding:0 18px;border:0;border-radius:10px;background:var(--pr);color:#fff;font:inherit;font-weight:500;cursor:pointer;transition:.15s;white-space:nowrap}
.btn:hover{filter:brightness(1.07)}.btn.block{width:100%;margin-top:14px}.btn.sm{height:34px;padding:0 12px;font-size:.85rem}
.btn.ghost{background:#fff;color:var(--tx);border:1px solid var(--bd)}.btn.ghost:hover{background:var(--bg)}.btn.danger{background:var(--rd2);color:var(--rd)}
.btn.ib2{width:36px;height:36px;padding:0;background:#fff;color:var(--mu);border:1px solid var(--bd)}.btn.ib2:hover{color:var(--pr);border-color:var(--pr)}.btn.ib2.danger{color:var(--rd)}
.card{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:18px;box-shadow:var(--sh)}
.badge{display:inline-block;padding:2px 10px;border-radius:20px;background:var(--bg);color:var(--mu);font-size:.75rem;font-weight:500}.badge.pr{background:var(--pr2);color:var(--pr)}.badge.gr{background:var(--gr2);color:var(--gr)}
.sw{position:relative;display:inline-block;width:40px;height:22px;flex:none;margin:0}.sw input{opacity:0;width:0;height:0;position:absolute}
.sw i{position:absolute;inset:0;background:#cbd5e1;border-radius:22px;transition:.2s;cursor:pointer}.sw i:before{content:"";position:absolute;width:16px;height:16px;top:3px;right:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px #0003}
.sw input:checked+i{background:var(--gr)}.sw input:checked+i:before{right:21px}
.toggle{display:flex;align-items:center;gap:8px;margin:0;color:var(--tx);font-size:.85rem}
.loginwrap{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:16px;background:linear-gradient(160deg,#eef0ff,#f4f6fb 60%)}
.login{width:100%;max-width:380px;text-align:center}.login img{width:64px;height:64px;border-radius:16px;box-shadow:var(--sh)}.login h2{margin:10px 0 2px}.login label{text-align:right}
.top{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;height:60px;padding:0 20px;background:#fffffff2;backdrop-filter:blur(8px);border-bottom:1px solid var(--bd)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.05rem}.brand img{width:32px;height:32px;border-radius:9px}.usr{display:flex;gap:10px;align-items:center}
.chip{padding:4px 12px;background:var(--bg);border-radius:20px;font-size:.85rem}
.wrap{max-width:1100px;margin:0 auto;padding:20px 16px 40px}
.seg{display:inline-flex;gap:4px;padding:4px;background:#e9edf5;border-radius:12px;margin-bottom:18px;max-width:100%;overflow:auto}
.seg button{display:flex;align-items:center;gap:6px;height:36px;padding:0 16px;border:0;background:none;border-radius:9px;font:inherit;color:var(--mu);cursor:pointer;white-space:nowrap}.seg button.act{background:#fff;color:var(--tx);box-shadow:0 1px 3px #0001;font-weight:500}
.seg.full{display:flex}.seg.full button{flex:1;justify-content:center}
.rowform{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;margin-bottom:18px}.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;align-items:end;margin-bottom:18px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px}
.rc{display:flex;flex-direction:column;gap:14px;border-top:4px solid var(--pr)}.rc-h{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.rc-h h3{margin:0;font-size:1.05rem}
.rc-s{display:flex;gap:20px;flex-wrap:wrap;padding:10px 12px;background:var(--bg);border-radius:10px}
.rc-a{display:flex;gap:8px;align-items:center;margin-top:auto}.rc-a .btn:first-child{flex:1}
.ur{display:flex;align-items:center;gap:12px}.av2{width:38px;height:38px;border-radius:50%;background:var(--pr2);color:var(--pr);display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}.ur .gx{flex:1;min-width:0}
.modal{position:fixed;inset:0;background:#0f172a66;display:flex;align-items:center;justify-content:center;z-index:60;padding:14px}
.modal .box{background:#fff;border-radius:18px;padding:20px;max-width:520px;width:100%;max-height:88dvh;overflow:auto;box-shadow:0 20px 60px #0004;position:relative}.modal h3{margin:0 0 12px}
.modal .x{position:absolute;left:12px;top:12px;border:0;background:var(--bg);width:32px;height:32px;border-radius:50%;cursor:pointer;color:var(--mu);display:flex;align-items:center;justify-content:center}
.mrow{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--bd)}.mrow:last-child{border:0}.mrow .gx{flex:1;min-width:0}.mrow select{width:auto;height:34px}
.perm{display:flex;align-items:center;gap:6px;margin:0;color:var(--mu)}
.toast{position:fixed;bottom:104px;left:50%;transform:translateX(-50%);background:#0f172a;color:#fff;padding:10px 18px;border-radius:12px;z-index:99;max-width:90vw;box-shadow:var(--sh)}
/* ===== روم ===== */
.shell{display:flex;flex-direction:column;height:100dvh}
.rtop{flex:none;height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:#fff;border-bottom:1px solid var(--bd)}
.rtop h1{font-size:1rem;margin:0}.warn{background:#fff7e6;color:#a15c00;padding:8px 16px;font-size:.85rem;border-bottom:1px solid #ffe2a8}
.rbody{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px;padding:14px}
.stagewrap{position:relative;min-height:0;overflow:auto;background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:14px;box-shadow:var(--sh)}
#tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;align-content:start}
.tile{position:relative;aspect-ratio:16/10;background:#eef1f8;border:2px solid transparent;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.tile.mc{border-color:var(--gr)}.tile.sc{grid-column:1/-1;aspect-ratio:16/9;max-height:62vh;background:#0f172a;margin:0 auto;width:100%}
.av{width:56px;height:56px;border-radius:50%;background:var(--pr);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:700}.tile.sc .av{display:none}
.vw{position:absolute;inset:0}.vw video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none}.tile.sc video{opacity:1}
.nm{position:absolute;bottom:8px;right:8px;display:flex;align-items:center;gap:6px;max-width:calc(100% - 16px);padding:3px 10px;background:#fffffff0;border-radius:20px;font-size:.78rem;box-shadow:0 1px 4px #0002}.nm span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nm .on{color:var(--gr)}.nm .off{color:var(--mu)}
.board{position:absolute;inset:0;z-index:5;background:#fff;border-radius:var(--r);display:flex;flex-direction:column;padding:12px;gap:10px}.bt{display:flex;align-items:center;gap:10px}.bt b{flex:1}
#cv{width:100%;flex:1;min-height:0;object-fit:contain;background:#fafbff;border:1px solid var(--bd);border-radius:10px;touch-action:none;cursor:crosshair}
.side{display:flex;flex-direction:column;min-height:0;background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.sh{flex:none;display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid var(--bd)}.sh .seg{margin:0;flex:1}.sh .seg button{flex:1;justify-content:center;padding:0 8px}
.sb{flex:1;min-height:0;display:flex;flex-direction:column}.pane{flex:1;min-height:0;display:flex;flex-direction:column}
#msgs{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:8px}.m{background:var(--bg);padding:6px 12px;border-radius:12px;max-width:92%;word-break:break-word}.m b{display:block;font-size:.75rem;color:var(--pr)}
#cf{flex:none;display:flex;gap:8px;padding:10px;border-top:1px solid var(--bd)}#cf .btn{width:42px;padding:0}
#users{flex:1;overflow:auto;padding:6px 12px}.u{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--bd)}.u .gx{flex:1;min-width:0}.u .av2{width:32px;height:32px;font-size:.85rem}.u .sw{margin:0}
.bar{flex:none;display:flex;justify-content:center;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--bd)}
.rb{position:relative;width:64px;height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:1px solid var(--bd);border-radius:14px;background:#fff;color:var(--tx);cursor:pointer;font:inherit;transition:background .15s,color .15s}
.rb small{font-size:.66rem;color:inherit;line-height:1}.rb:hover{background:var(--bg)}.rb.on{background:var(--gr2);color:var(--gr);border-color:#b7e6c6}
.rb.lock{color:#a8b2c3;background:var(--bg)}.rb.lock:after{content:"";position:absolute;top:6px;left:6px;width:7px;height:7px;border-radius:50%;background:#f59e0b}
.rb.rec{background:var(--rd2);color:var(--rd);border-color:#f6c4c0}.rb.red{background:var(--rd);color:#fff;border-color:var(--rd)}.rb.dot:before{content:"";position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--pr)}
@media(max-width:800px){.rbody{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:10px;padding:10px}.side{height:42dvh}.side.mini{height:52px}.rb{width:50px;height:54px}.bar{gap:6px}.rb small{display:none}.rowform{grid-template-columns:1fr}.top{padding:0 12px}}
.side.full{position:fixed;inset:0;z-index:50;height:auto;border-radius:0}.side.mini .sb{display:none}
[hidden]{display:none}