/* سهر الليالي v6 */
:root{--bg-app:#dde3ed;--bg-white:#fff;--bg-panel:#eef1f7;--bg-toolbar:#4a7fd4;--bg-hover:#dce8ff;--bg-sel:#c8d8f8;--bg-join:#e8ffe8;--bg-leave:#ffe8e8;--border:#a0b0d0;--border-dk:#6080b0;--accent:#2a5ab0;--accent2:#4a7fd4;--text-main:#000;--text-muted:#555577;--green:#008000;--red:#cc0000;--gold:#b8860b;--font:'Cairo','Tahoma',sans-serif;--r:3px;--c-admin:#cc0000;--c-mod:#8b4513;--c-vip:#7700cc;--c-user:#000080;--c-guest:#555577}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:var(--font);background:var(--bg-app);color:var(--text-main);overflow:hidden;font-size:13px}
.screen{display:none;width:100%;height:100vh;flex-direction:column}
.screen.active{display:flex}
#loginScreen{align-items:center;justify-content:center;background:linear-gradient(135deg,#2a5ab0,#4a7fd4,#2a5ab0)}
.login-bg{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.login-card{background:#eef1f7;border:2px solid var(--border-dk);border-radius:6px;padding:22px 26px 18px;width:390px;box-shadow:4px 4px 14px rgba(0,0,0,.4),inset 1px 1px 0 #fff}
.login-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.login-logo{font-size:40px}.login-title{font-size:20px;font-weight:900;color:var(--accent)}.login-sub{font-size:11px;color:var(--text-muted)}
.login-tabs{display:flex;border-bottom:2px solid var(--accent);margin-bottom:14px}
.ltab{padding:6px 18px;background:#d4d8e4;border:1px solid var(--border);border-bottom:none;font-family:var(--font);font-size:12px;font-weight:700;cursor:pointer;color:var(--text-muted);border-radius:3px 3px 0 0;margin-left:2px}
.ltab.active{background:#eef1f7;color:var(--accent);border-bottom:2px solid #eef1f7;margin-bottom:-2px}
.ltab-content{display:none;flex-direction:column;gap:9px}.ltab-content.active{display:flex}
.lfield{display:flex;flex-direction:column;gap:3px}
.lfield label,.mfield label{font-size:11px;font-weight:700;color:var(--text-muted)}
.lfield input,.mfield input,.mfield textarea,.mfield select,.rm-search{width:100%;padding:6px 8px;background:#fff;border:1px solid var(--border-dk);border-radius:var(--r);font-family:var(--font);font-size:13px;outline:none;box-shadow:inset 1px 1px 2px rgba(0,0,0,.12)}
.lfield input:focus,.mfield input:focus,.mfield textarea:focus{border-color:var(--accent2)}
.lbtns{display:flex;gap:8px;margin-top:4px}
.lbtn-primary{flex:1;padding:7px;background:linear-gradient(to bottom,#4a7fd4,#2a5ab0);border:1px solid #1a3a80;border-radius:var(--r);color:#fff;font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer}
.lbtn-primary:hover{background:linear-gradient(to bottom,#5a8fe4,#3a6ac0)}.lbtn-primary:disabled{opacity:.5;cursor:not-allowed}
.lbtn-secondary{padding:7px 16px;background:linear-gradient(to bottom,#e8eaf0,#c8ccd8);border:1px solid var(--border-dk);border-radius:var(--r);font-family:var(--font);font-size:13px;cursor:pointer}
.login-error{color:var(--red);font-size:11px;min-height:16px;text-align:center;margin-top:6px}
.avatar-grid{display:flex;flex-wrap:wrap;gap:4px}
.av-opt{width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:17px;border:2px solid transparent;border-radius:3px;cursor:pointer;background:#fff;box-shadow:1px 1px 2px rgba(0,0,0,.15)}
.av-opt:hover,.av-opt.selected{border-color:var(--accent2);background:#dce8ff}
.menubar{display:flex;align-items:center;justify-content:space-between;height:32px;min-height:32px;background:linear-gradient(to bottom,#5590e0,#3a6ac8);border-bottom:1px solid #1a3a90;padding:0 8px}
.menu-left,.menu-right{display:flex;align-items:center;gap:8px}
.me-badge{display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);border-radius:3px;padding:2px 8px;cursor:pointer;position:relative;font-size:12px;color:#fff;font-weight:700}
.me-badge:hover{background:rgba(255,255,255,.25)}
.me-arrow{font-size:9px}
.me-dropdown{display:none;position:absolute;top:100%;right:0;background:#eef1f7;border:1px solid var(--border-dk);border-radius:3px;min-width:140px;box-shadow:2px 2px 6px rgba(0,0,0,.3);z-index:300}
.me-badge:hover .me-dropdown{display:block}
.me-drop-item{padding:7px 12px;font-size:12px;color:var(--text-main);cursor:pointer}
.me-drop-item:hover{background:var(--bg-hover)}
.menu-center{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:900;color:#ffe080;text-shadow:1px 1px 2px rgba(0,0,0,.5)}
.online-pill{background:rgba(0,0,0,.25);color:#fff;font-size:11px;padding:2px 8px;border-radius:10px}
.conn-dot{width:8px;height:8px;border-radius:50%}
.conn-dot.connected{background:#00ff00;box-shadow:0 0 5px #00ff00}.conn-dot.disconnected{background:#ff4040}.conn-dot.connecting{background:#ffff00;animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.notif-bell{position:relative;cursor:pointer;font-size:16px;color:#fff;padding:2px 5px}
.notif-count{position:absolute;top:-4px;right:-4px;background:var(--red);color:#fff;font-size:9px;font-weight:700;border-radius:10px;padding:0 4px;min-width:16px;text-align:center}
.toolbar{display:flex;align-items:center;height:46px;min-height:46px;background:linear-gradient(to bottom,#5a90e8,#3070c8);border-bottom:2px solid #1a4090;padding:0 6px;gap:3px}
.tb-group{display:flex;align-items:center;gap:3px}
.tb-sep{width:1px;height:32px;background:rgba(255,255,255,.25);margin:0 5px}
.tb-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3px 10px;min-width:50px;height:38px;background:linear-gradient(to bottom,#6aa0f8,#3878d8);border:1px solid #1858b8;border-radius:3px;color:#fff;cursor:pointer;gap:1px;box-shadow:1px 1px 2px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.2);font-family:var(--font);font-size:9px;font-weight:700;white-space:nowrap}
.tb-btn:hover{background:linear-gradient(to bottom,#7ab0ff,#4888e8)}
.tb-btn:active,.tb-btn.active{background:linear-gradient(to bottom,#2858b8,#4878d8);box-shadow:inset 1px 1px 3px rgba(0,0,0,.4)}
.tb-btn.tb-mute{background:linear-gradient(to bottom,#e06060,#b03030);border-color:#801010}
.tb-right{flex:1;display:flex;justify-content:flex-start;padding-right:8px}
.room-tab{display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.9);border:1px solid var(--border-dk);border-radius:3px 3px 0 0;padding:4px 10px;font-size:12px;font-weight:700;color:var(--accent);margin-top:4px}
.tab-x{font-size:11px;color:#888;cursor:pointer}.tab-x:hover{color:var(--red)}
.chat-layout{display:flex;flex:1;overflow:hidden;height:calc(100vh - 32px - 46px)}
.panel-header{padding:5px 8px;font-size:11px;font-weight:700;background:linear-gradient(to bottom,#6aa0f0,#4a80d8);color:#fff;border-bottom:1px solid #2a60b8;display:flex;align-items:center;justify-content:space-between;text-shadow:1px 1px 1px rgba(0,0,0,.3)}
.count-badge{background:rgba(0,0,0,.25);color:#fff;font-size:10px;padding:1px 6px;border-radius:10px}
.users-panel{width:190px;min-width:190px;background:var(--bg-panel);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.stage-section{padding:5px 6px;border-bottom:1px solid var(--border);background:#e8f0ff}
.stage-title{font-size:10px;font-weight:700;color:var(--accent);margin-bottom:4px}
.stage-slots{display:flex;flex-wrap:wrap;gap:3px;min-height:20px}
.stage-empty{font-size:10px;color:#aaa;font-style:italic}
.stage-user{display:flex;align-items:center;gap:3px;background:#fff;border:1px solid #b0c8f0;border-radius:10px;padding:2px 7px;font-size:10px;font-weight:700;color:var(--accent)}
.stage-user.speaking{border-color:var(--green);color:var(--green);animation:spk .8s infinite}
@keyframes spk{0%,100%{box-shadow:0 0 0 0 rgba(0,128,0,.3)}50%{box-shadow:0 0 0 3px rgba(0,128,0,.1)}}
.stage-user.muted{border-color:var(--red);color:var(--red);opacity:.6}
.hand-section{margin-top:4px;border-top:1px solid var(--border);padding-top:4px}
.hand-title{font-size:10px;font-weight:700;color:var(--gold);margin-bottom:3px}
.hand-list{display:flex;flex-direction:column;gap:2px}
.hand-item{display:flex;align-items:center;justify-content:space-between;font-size:10px;padding:2px 5px;background:#fffbe8;border:1px solid #e0d080;border-radius:3px}
.hand-approve{background:var(--green);border:none;border-radius:2px;color:#fff;font-size:9px;padding:1px 5px;cursor:pointer;font-family:var(--font)}
.cam-strip{display:flex;flex-wrap:wrap;gap:3px;padding:4px;border-bottom:1px solid var(--border);background:#fff}
.cam-thumb{position:relative;width:82px;height:62px;border:1px solid var(--border);border-radius:3px;overflow:hidden;background:#000;cursor:pointer}
.cam-thumb video{width:100%;height:100%;object-fit:cover}
.cam-thumb-name{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.6);color:#fff;font-size:9px;text-align:center;padding:1px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cam-req-btn{position:absolute;top:2px;right:2px;background:var(--accent2);border:none;border-radius:2px;color:#fff;font-size:8px;padding:1px 4px;cursor:pointer;display:none}
.cam-thumb:hover .cam-req-btn{display:block}
.user-list-wrap{flex:1;overflow-y:auto}
.user-list{list-style:none}
.user-item{display:flex;align-items:center;gap:5px;padding:4px 7px;border-bottom:1px solid #dde3f0;cursor:pointer}
.user-item:hover{background:var(--bg-hover)}.user-item.selected{background:var(--bg-sel)}
.u-av{font-size:19px;flex-shrink:0}.u-info{flex:1;min-width:0}
.u-nick{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u-nick.role-admin{color:var(--c-admin)}.u-nick.role-moderator{color:var(--c-mod)}.u-nick.role-vip{color:var(--c-vip)}.u-nick.role-user{color:var(--c-user)}.u-nick.role-guest{color:var(--c-guest)}
.u-status{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0}
.u-icons{display:flex;gap:2px;font-size:10px}
.rooms-panel{width:160px;min-width:160px;background:var(--bg-panel);border-right:1px solid var(--border);display:flex;flex-direction:column}
.rooms-list{list-style:none;overflow-y:auto;flex:1}
.room-item{display:flex;align-items:center;gap:5px;padding:7px 8px;border-bottom:1px solid #dde3f0;cursor:pointer}
.room-item:hover{background:var(--bg-hover)}.room-item.active{background:var(--bg-sel);border-right:3px solid var(--accent2)}
.ri-icon{font-size:14px;flex-shrink:0}.ri-info{flex:1;min-width:0}
.ri-name{font-size:12px;font-weight:700;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ri-count{font-size:10px;color:var(--text-muted)}.ri-lock{font-size:10px}
.ri-edit{opacity:0;font-size:10px;padding:1px 4px;background:var(--accent);color:#fff;border:none;border-radius:2px;cursor:pointer}
.room-item:hover .ri-edit{opacity:1}
.chat-panel{flex:1;display:flex;flex-direction:column;overflow:hidden;background:#fff;border-left:1px solid var(--border);border-right:1px solid var(--border)}
.welcome-banner{background:#fffbe8;border-bottom:1px solid #e0d080;padding:5px 10px;font-size:12px;font-weight:700;color:#806000;text-align:center}
.messages-area{flex:1;overflow-y:auto;padding:4px 8px;display:flex;flex-direction:column;background:#fff}
.messages-area::-webkit-scrollbar{width:14px}.messages-area::-webkit-scrollbar-track{background:#e8eaf0}.messages-area::-webkit-scrollbar-thumb{background:#a8b8d8;border:2px solid #e8eaf0;border-radius:2px}
.chat-welcome{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}
.msg-join{background:var(--bg-join);border-bottom:1px solid #c0f0c0;padding:2px 8px;display:flex;align-items:center;gap:6px;font-size:11px}
.msg-leave{background:var(--bg-leave);border-bottom:1px solid #f0c0c0;padding:2px 8px;display:flex;align-items:center;gap:6px;font-size:11px}
.msg-line{display:flex;align-items:baseline;gap:3px;padding:1px 4px;border-bottom:1px solid #f0f2f8;font-size:13px;line-height:1.6;animation:fadeIn .1s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.msg-line:hover{background:#f5f7ff}
.msg-ts{font-size:10px;color:#999;flex-shrink:0;min-width:38px}
.msg-av{font-size:16px;flex-shrink:0;cursor:pointer}
.msg-nick{font-weight:700;flex-shrink:0;cursor:pointer;white-space:nowrap}
.msg-nick:hover{text-decoration:underline}
.msg-nick.role-admin{color:var(--c-admin)}.msg-nick.role-moderator{color:var(--c-mod)}.msg-nick.role-vip{color:var(--c-vip)}.msg-nick.role-user{color:var(--c-user)}.msg-nick.role-guest{color:var(--c-guest)}
.msg-colon{color:#666;flex-shrink:0}.msg-text{flex:1;word-break:break-word}
.msg-img{max-width:200px;max-height:150px;border-radius:4px;cursor:pointer;border:1px solid var(--border)}
.msg-sys{text-align:center;color:#888;font-size:11px;padding:3px;font-style:italic;background:#f8f8ff;border-bottom:1px solid #eee}
.msg-whisper .msg-text,.msg-whisper .msg-nick{color:var(--gold);font-style:italic}
.msg-actions{display:none;gap:3px;margin-right:4px}.msg-line:hover .msg-actions{display:flex}
.msg-act-btn{background:#e8f0ff;border:1px solid #b0c8f0;border-radius:2px;font-size:10px;padding:0 4px;cursor:pointer}
.reply-ref{font-size:10px;color:#999;border-right:2px solid #b0c8f0;padding-right:4px;margin-left:4px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reactions-row{display:flex;flex-wrap:wrap;gap:3px;padding:1px 8px 2px}
.react-pill{background:#f0f4ff;border:1px solid #b0c8f0;border-radius:10px;padding:0 5px;font-size:11px;cursor:pointer}
.typing-row{padding:3px 8px;font-size:11px;color:var(--text-muted);display:flex;align-items:center;gap:5px;background:#f8f9ff;border-top:1px solid #e8eaf0}
.typing-dots{display:flex;gap:2px}.typing-dots span{width:4px;height:4px;border-radius:50%;background:var(--accent2);animation:tb 1.2s infinite}
.typing-dots span:nth-child(2){animation-delay:.2s}.typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes tb{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-4px)}}
.reply-bar{display:flex;align-items:center;gap:6px;padding:3px 8px;background:#e8f0ff;border-top:1px solid #b0c8f0;font-size:11px}
.reply-arrow{color:var(--accent);font-size:13px}
#replySnippet{flex:1;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.input-area{background:#eef1f7;border-top:2px solid var(--border)}
.fmt-bar{display:flex;align-items:center;gap:3px;padding:4px 6px;background:#dde3ed;border-bottom:1px solid var(--border);flex-wrap:wrap}
.fmt-btn{padding:2px 8px;background:linear-gradient(to bottom,#f8faff,#dde3ed);border:1px solid var(--border-dk);border-radius:2px;font-family:var(--font);font-size:12px;cursor:pointer;color:var(--text-main);box-shadow:1px 1px 1px rgba(0,0,0,.12);display:flex;align-items:center;gap:3px}
.fmt-btn:hover{background:linear-gradient(to bottom,#fff,#eef1ff)}.fmt-btn.active{background:linear-gradient(to bottom,#c8d8ff,#a8c0f0);border-color:var(--accent)}
.color-dot{width:14px;height:14px;border-radius:2px;border:1px solid #666;display:inline-block}
.fmt-sep{width:1px;height:20px;background:var(--border);margin:0 3px}
.color-wrap{position:relative}
.color-panel{position:absolute;bottom:calc(100% + 4px);right:0;background:#eef1f7;border:1px solid var(--border-dk);border-radius:3px;padding:8px;box-shadow:2px 2px 8px rgba(0,0,0,.3);z-index:300;width:196px}
.color-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:2px;margin-bottom:7px}
.c-swatch{width:16px;height:16px;border-radius:2px;border:1px solid rgba(0,0,0,.2);cursor:pointer}
.c-swatch:hover{transform:scale(1.3);border-color:#000}
.color-custom-row{display:flex;gap:5px;align-items:center}
#customColorInput{flex:1;height:26px;border:1px solid var(--border);border-radius:2px;cursor:pointer}
.input-row{display:flex;gap:6px;padding:5px 6px;align-items:flex-end}
#msgInput{flex:1;resize:none;padding:6px 8px;background:#fff;border:1px solid var(--border-dk);border-radius:var(--r);font-family:var(--font);font-size:14px;outline:none;box-shadow:inset 1px 1px 2px rgba(0,0,0,.12);line-height:1.5;max-height:80px;overflow-y:hidden;scrollbar-width:none}
#msgInput:focus{border-color:var(--accent2)}
.send-btn{padding:8px 20px;background:linear-gradient(to bottom,#4a7fd4,#2a5ab0);border:1px solid #1a3a90;border-radius:var(--r);color:#fff;font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;align-self:flex-end}
.send-btn:hover{background:linear-gradient(to bottom,#5a8fe4,#3a6ac0)}
.emoji-picker{position:absolute;bottom:110px;right:165px;background:#eef1f7;border:1px solid var(--border-dk);border-radius:3px;padding:8px;display:flex;flex-wrap:wrap;gap:3px;width:320px;max-height:220px;overflow-y:auto;z-index:200;box-shadow:2px 2px 8px rgba(0,0,0,.3)}
.emoji-item{font-size:18px;cursor:pointer;padding:2px;border-radius:2px;line-height:1}.emoji-item:hover{background:var(--bg-hover)}
.rm-btn{padding:5px 14px;background:linear-gradient(to bottom,#e8eaf8,#c8ccd8);border:1px solid var(--border-dk);border-radius:var(--r);font-family:var(--font);font-size:12px;cursor:pointer}
.rm-btn:hover{background:linear-gradient(to bottom,#f0f2ff,#d8dce8)}
.rm-btn-green{background:linear-gradient(to bottom,#70c870,#409840);border-color:#307830;color:#fff}
.rm-btn-green:hover{background:linear-gradient(to bottom,#80d880,#50a850)}
.rm-btn-red{background:linear-gradient(to bottom,#e86060,#b83030);border-color:#881010;color:#fff}
.rm-btn-red:hover{background:linear-gradient(to bottom,#f07070,#c84040)}
.rm-btn.full{width:100%}
.rm-select{width:100%;padding:6px 8px;border:1px solid var(--border-dk);border-radius:var(--r);font-family:var(--font);font-size:13px;background:#fff;outline:none}
.rm-num-input{width:70px;padding:4px 6px;border:1px solid var(--border-dk);border-radius:var(--r);font-size:12px;text-align:center}
.x-btn{background:none;border:none;cursor:pointer;color:rgba(255,255,255,.8);font-size:15px;padding:1px 5px;border-radius:2px}
.x-btn:hover{background:rgba(255,255,255,.2);color:#fff}
.modal-overlay{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center}
.modal{background:#eef1f7;border:2px solid var(--border-dk);border-radius:4px;width:100%;max-width:420px;max-height:90vh;overflow-y:auto;box-shadow:4px 4px 16px rgba(0,0,0,.4);animation:modalIn .15s ease}
@keyframes modalIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.modal-tb{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;background:linear-gradient(to bottom,#5590e0,#3570c0);color:#fff;font-size:13px;font-weight:700;border-radius:2px 2px 0 0}
.modal-body{padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.modal-body hr{border:none;border-top:1px solid var(--border)}
.mfield{display:flex;flex-direction:column;gap:3px}.prof-avatar{font-size:52px;text-align:center}
.chk-row{display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer}
.rules-text{font-size:13px;line-height:2;white-space:pre-wrap;min-height:50px}
.rules-text:empty::before{content:'لا توجد قواعد';color:#aaa;font-style:italic}
.room-icon-grid{display:flex;flex-wrap:wrap;gap:4px}
.ri-opt{width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:16px;border:2px solid transparent;border-radius:3px;background:#fff;cursor:pointer}
.ri-opt:hover,.ri-opt.selected{border-color:var(--accent2);background:#dce8ff}
.info-msg{font-size:11px;text-align:center;min-height:16px}.info-msg.success{color:var(--green)}.info-msg.error{color:var(--red)}
.uinfo-row{display:flex;gap:10px;margin-bottom:6px;font-size:12px}
.uinfo-label{font-weight:700;width:110px;color:var(--text-muted);flex-shrink:0}
.mute-options{display:flex;flex-direction:column;gap:8px;background:#f8faff;border:1px solid #c0d0f0;border-radius:3px;padding:12px}
.rm-overlay{position:fixed;inset:0;z-index:600;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center}
.rm-window{background:#eef1f7;border:2px solid var(--border-dk);border-radius:5px;width:840px;max-width:98vw;height:580px;max-height:96vh;display:flex;flex-direction:column;box-shadow:4px 4px 20px rgba(0,0,0,.5);animation:modalIn .15s ease}
.rm-titlebar{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;background:linear-gradient(to bottom,#5590e0,#3570c0);color:#fff;font-weight:700;font-size:14px;border-radius:3px 3px 0 0}
.rm-body{display:flex;flex:1;overflow:hidden}
.rm-nav{width:160px;min-width:160px;background:#dde3ed;border-left:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto}
.rm-nav-item{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:12px;font-weight:600;cursor:pointer;border-bottom:1px solid #c8d0e0;color:var(--text-main)}
.rm-nav-item:hover{background:var(--bg-hover)}.rm-nav-item.active{background:var(--bg-sel);color:var(--accent);border-right:3px solid var(--accent2)}
.rm-content{flex:1;overflow:hidden;display:flex;flex-direction:column}
.rm-panel{display:none;flex:1;overflow-y:auto;padding:14px 16px;flex-direction:column;gap:10px}.rm-panel.active{display:flex}
.rmp-title{font-size:14px;font-weight:900;color:var(--accent);border-bottom:2px solid var(--accent2);padding-bottom:6px;margin-bottom:4px}
.rm-table{width:100%;border-collapse:collapse;font-size:11px}
.rm-table th{background:linear-gradient(to bottom,#6aa0f0,#4a80d8);color:#fff;padding:5px 8px;text-align:right;font-weight:700;border:1px solid #3a70c8}
.rm-table td{padding:5px 8px;border:1px solid #d0d8e8;background:#fff}
.rm-table tr:nth-child(even) td{background:#f0f4ff}.rm-table tr:hover td{background:var(--bg-hover)}
.rm-toolbar-bottom{display:flex;align-items:center;justify-content:space-between;padding:8px 0 0;border-top:1px solid var(--border);margin-top:6px;flex-wrap:wrap;gap:6px}
.rm-count-row{display:flex;gap:12px;font-size:11px;color:var(--text-muted)}.rm-action-btns{display:flex;gap:5px}
.voice-settings{display:flex;flex-direction:column;gap:10px}.setting-row{display:flex;align-items:center;gap:8px;font-size:12px}
.design-grid{display:flex;flex-direction:column;gap:8px}
.design-row{display:flex;align-items:center;gap:10px}
.design-row label{width:160px;font-size:12px;font-weight:700;color:var(--text-muted)}
.design-row input[type="color"]{width:40px;height:26px;border:1px solid var(--border);border-radius:2px;cursor:pointer}
.design-row input[type="text"]{flex:1;padding:5px 8px;border:1px solid var(--border-dk);border-radius:var(--r);font-family:var(--font);font-size:12px;outline:none}
.adv-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.adv-section-title{font-size:12px;font-weight:700;color:var(--accent);margin-bottom:6px}
.banned-tabs{display:flex;gap:3px;margin-bottom:8px}
.banned-tab{padding:5px 14px;background:#d4d8e4;border:1px solid var(--border);border-bottom:none;font-family:var(--font);font-size:11px;cursor:pointer;border-radius:3px 3px 0 0}
.banned-tab.active{background:#eef1f7;color:var(--accent)}
.pm-panel{position:fixed;bottom:0;left:0;width:285px;height:370px;z-index:450;background:#eef1f7;border:2px solid var(--border-dk);border-radius:4px 4px 0 0;display:flex;flex-direction:column;box-shadow:3px -3px 12px rgba(0,0,0,.3);animation:pmUp .2s ease}
@keyframes pmUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.pm-tb{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;background:linear-gradient(to bottom,#5590e0,#3570c0);color:#fff;font-size:12px;font-weight:700}
.pm-msgs{flex:1;overflow-y:auto;padding:7px;background:#fff;display:flex;flex-direction:column;gap:4px}
.pm-input{display:flex;gap:5px;padding:6px 8px;border-top:1px solid var(--border)}
.pm-input input{flex:1;padding:5px 7px;border:1px solid var(--border-dk);border-radius:2px;font-family:var(--font);font-size:12px;outline:none}
.pm-msg{padding:4px 8px;border-radius:3px;font-size:12px;max-width:85%;word-break:break-word}
.pm-msg.sent{background:#d8e8ff;border:1px solid #b0c8f0;align-self:flex-end}.pm-msg.recv{background:#f8f5f0;border:1px solid #d0ccc8;align-self:flex-start}
.pm-msg-from{font-size:9px;font-weight:700;color:var(--accent);margin-bottom:2px}
.ctx-menu{position:fixed;z-index:700;background:#eef1f7;border:1px solid var(--border-dk);border-radius:2px;box-shadow:3px 3px 8px rgba(0,0,0,.4);min-width:170px;animation:ctx .1s ease}
@keyframes ctx{from{opacity:0;transform:scale(.95)}to{opacity:1}}
.ctx-menu ul{list-style:none}
.ctx-menu li{padding:7px 14px;font-size:12px;cursor:pointer;color:var(--text-main);display:flex;align-items:center;gap:7px;border-bottom:1px solid #dde3f0}
.ctx-menu li:last-child{border-bottom:none}.ctx-menu li:hover{background:var(--bg-hover)}
.ctx-menu li.ctx-hdr{font-weight:700;color:var(--accent);background:#dce8ff;cursor:default;font-size:11px}.ctx-menu li.ctx-hdr:hover{background:#dce8ff}
.ctx-menu li.ctx-sep{padding:0;height:1px;background:var(--border);cursor:default}.ctx-menu li.ctx-sep:hover{background:var(--border)}
.ctx-menu li.ctx-danger{color:var(--red)}.ctx-menu li.ctx-danger:hover{background:#ffe0e0}
.notif-container{position:fixed;bottom:16px;left:16px;z-index:800;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.notif-popup{background:#fff;border:1px solid var(--border-dk);border-radius:6px;padding:12px 14px;box-shadow:3px 3px 12px rgba(0,0,0,.35);min-width:270px;max-width:320px;animation:slideInLeft .3s ease;font-family:var(--font);font-size:12px;pointer-events:all}
@keyframes slideInLeft{from{transform:translateX(-120%);opacity:0}to{transform:translateX(0);opacity:1}}
.notif-from{font-size:13px;font-weight:700;color:var(--accent);margin-bottom:3px}
.notif-text{color:var(--text-muted);margin-bottom:8px}
.notif-actions{display:flex;gap:6px}
.notif-btn{padding:4px 12px;border:none;border-radius:3px;font-family:var(--font);font-size:11px;cursor:pointer;font-weight:700}
.notif-btn-green{background:var(--green);color:#fff}.notif-btn-red{background:var(--red);color:#fff}.notif-btn-gray{background:#ccc;color:#333}
.toast-container{position:fixed;top:85px;left:50%;transform:translateX(-50%);z-index:900;display:flex;flex-direction:column;gap:5px;pointer-events:none}
.toast{background:#eef1f7;border:1px solid var(--border-dk);border-radius:3px;padding:7px 18px;font-size:12px;box-shadow:2px 2px 8px rgba(0,0,0,.3);white-space:nowrap;animation:toastIn .2s ease;font-family:var(--font)}
.toast.success{border-color:var(--green);background:#f0fff0;color:var(--green)}.toast.error{border-color:var(--red);background:#fff0f0;color:var(--red)}.toast.info{border-color:var(--accent);background:#f0f4ff;color:var(--accent)}
@keyframes toastIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.spy-overlay{position:fixed;inset:0;z-index:700;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center}
.spy-window{background:#0a0a1a;border:2px solid #400080;border-radius:6px;width:920px;max-width:98vw;height:610px;max-height:96vh;display:flex;flex-direction:column;box-shadow:0 0 40px rgba(128,0,255,.4);animation:modalIn .2s ease}
.spy-titlebar{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:linear-gradient(to right,#200040,#400080,#200040);color:#cc88ff;font-size:13px;font-weight:700;border-radius:4px 4px 0 0;border-bottom:1px solid #600090}
.spy-body{display:flex;flex:1;overflow:hidden}
.spy-nav{width:145px;min-width:145px;background:#0f0020;border-left:1px solid #400080;display:flex;flex-direction:column;overflow-y:auto}
.spy-nav-item{padding:10px 12px;font-size:11px;font-weight:600;cursor:pointer;color:#aa88cc;border-bottom:1px solid #200040}
.spy-nav-item:hover{background:#200040;color:#cc88ff}.spy-nav-item.active{background:#300060;color:#ee88ff;border-right:3px solid #8800ff}
.spy-content{flex:1;overflow:hidden;display:flex;flex-direction:column}
.spy-panel{display:none;flex:1;overflow-y:auto;padding:12px;flex-direction:column;gap:8px}.spy-panel.active{display:flex}
.spy-panel-title{font-size:12px;font-weight:700;color:#cc88ff;border-bottom:1px solid #400080;padding-bottom:6px;margin-bottom:6px}
.spy-live-log{flex:1;overflow-y:auto;background:#050010;border:1px solid #300060;border-radius:3px;padding:8px;font-size:11px;font-family:'Courier New',monospace;color:#88ffaa}
.spy-msg-line{padding:2px 0;border-bottom:1px solid #0a001a}.spy-ts{color:#668866;margin-left:6px}
.spy-rooms-layout{display:flex;gap:10px;flex:1;overflow:hidden}
.spy-room-list{list-style:none;width:130px;background:#050010;border:1px solid #300060;border-radius:3px;overflow-y:auto}
.spy-room-item{padding:8px 10px;font-size:11px;color:#aa88cc;cursor:pointer;border-bottom:1px solid #0a001a}
.spy-room-item:hover{background:#200040;color:#cc88ff}.spy-room-item.active{background:#300060;color:#ee88ff}
.spy-messages{flex:1;overflow-y:auto;background:#050010;border:1px solid #300060;border-radius:3px;padding:8px;font-size:11px;color:#ccaaee;font-family:'Courier New',monospace}
.spy-panel .rm-table th{background:#200040;border-color:#300060}.spy-panel .rm-table td{background:#080015;border-color:#1a0030;color:#ccaaee}
.spy-panel .rm-table tr:nth-child(even) td{background:#0f001f}.spy-panel .rm-table tr:hover td{background:#200040}
.undercover-bar{position:fixed;top:32px;left:50%;transform:translateX(-50%);background:#400080;color:#ee88ff;font-size:11px;font-weight:700;padding:3px 16px;border-radius:0 0 8px 8px;border:1px solid #600090;border-top:none;z-index:200;pointer-events:none;animation:pulse 2s infinite}
::-webkit-scrollbar{width:14px;height:14px}::-webkit-scrollbar-track{background:#d8dce8}::-webkit-scrollbar-thumb{background:#a8b8d8;border:2px solid #d8dce8;border-radius:2px}
@media(max-width:780px){.rooms-panel{display:none}.users-panel{width:150px;min-width:150px}.rm-window{width:98vw;height:96vh}.adv-cols{grid-template-columns:1fr}}