:root{--bg:#2f3337;--panel:#2b2f34;--row:#3a3f44;--rowInner:#2f3337;--border:#4c535b;--text:#e0e5ea;--subtle:#aeb6bf;--white:#ffffff;--accent:#ff7e00;}
*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:Tahoma,Arial,sans-serif;}
button{cursor:pointer}a{color:var(--accent)}
.topbar{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;background:linear-gradient(#d5d9df,#aeb5bd 55%,#8f969f);border-bottom:1px solid var(--border);color:#1a1d1f;}
.badge{display:inline-flex;align-items:center;border:1px solid var(--border);background:#1f2327;color:var(--text);border-radius:999px;padding:2px 8px;font-size:12px}
.container{height:calc(100% - 44px);}
.lobby-item{background:var(--row);border:1px solid var(--border);border-radius:6px;padding:10px;margin-bottom:10px}
.lobby-item:hover{filter:brightness(1.05)}.lobby-icon{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--border);background:var(--rowInner);border-radius:6px;color:var(--text)}
.glossy{background:linear-gradient(#2a2a2a,#0d0e10);color:#fff;border:1px solid #6a6a6a;border-radius:6px;padding:6px 10px}
.chat-wrap{display:flex;height:100%}.chat-left{flex:1;display:flex;flex-direction:column;background:#fff}
.chat-title{background:var(--row);color:var(--text);border-bottom:1px solid var(--border);padding:6px 10px;display:flex;justify-content:space-between;align-items:center}
.chat-messages{flex:1;overflow:auto}.chat-messages .line{padding:4px 8px;font-size:13px}
.chat-bottom{border-top:1px solid var(--border);background:var(--row);padding:6px;display:flex;gap:6px;align-items:center}
.chat-bottom input[type=text]{flex:1;height:32px;border:1px solid var(--border);border-radius:6px;padding:0 8px}
.users{width:340px;border-left:1px solid var(--border);background:var(--panel);display:flex;flex-direction:column}
.users-head{border-bottom:1px solid var(--border);padding:6px 10px;display:flex;justify-content:space-between}
.tools-head{border-bottom:1px solid var(--border);padding:6px 10px;display:flex;gap:8px}
.user-row{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);padding:6px 10px;font-size:13px}
.dot{width:8px;height:8px;border-radius:999px;display:inline-block;margin-right:6px}
.modal-back{position:fixed;inset:0;background:rgba(0,0,0,.6);display:grid;place-items:center;z-index:50}
.modal{width:min(700px,96vw);background:#dfe8fb;border:1px solid #9fb1d8;border-radius:8px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.35)}
.modal-head{background:linear-gradient(#f6f9ff,#e2e9fb);border-bottom:1px solid #adc0e6;padding:8px 12px;display:flex;justify-content:space-between;color:#264169}
.modal-note{background:#f3f7ff;border-bottom:1px solid #c2d2f0;color:#29436b;padding:8px 12px}
.modal-body{background:#e7efff;padding:12px}.panel{background:#eef3ff;border:1px solid #b9c8e6;border-radius:6px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.panel .ph{background:linear-gradient(#f7fbff,#e2edff);color:#2f4b7a;border-bottom:1px solid #c7d6f2;padding:8px 10px;font-weight:bold}.panel .pc{padding:10px}
.right-bg{background-position:98% 20%;background-repeat:no-repeat;background-size:240px}video{background:#000}
.footer-note{font-size:12px;padding:4px 10px;border-top:1px solid var(--border);background:#fff;color:#333}