:root{--bg: #0e1621;--panel: #17212b;--panel2: #1c2733;--input: #242f3d;--border: #2b3a4a;--text: #ffffff;--muted: #7d8e9e;--accent: #5eb5f7;--accent2: #71a6f0;--danger: #f26d6d;--ok: #4ade80;--speak: #43b581}*{box-sizing:border-box;margin:0;padding:0}html,body,#app{height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);font-size:15px}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}.landing{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:24px;text-align:center}.landing .logo{font-size:34px;font-weight:700;letter-spacing:-.5px}.landing .logo span{color:var(--accent)}.landing .tagline{color:var(--muted);max-width:460px;line-height:1.5}.btn{padding:12px 28px;border-radius:14px;background:var(--accent);color:#0b1a28;font-weight:600;transition:background .15s,transform .1s}.btn:hover{background:var(--accent2)}.btn:active{transform:scale(.97)}.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--border)}.btn.small{padding:8px 16px;border-radius:10px;font-size:14px}.btn.danger{background:var(--danger);color:#fff}.join-row{display:flex;gap:10px}.join-row input{width:220px;padding:12px 16px;border-radius:14px;border:1px solid var(--border);background:var(--input);color:var(--text);font:inherit;text-transform:lowercase}.join-row input:focus{outline:none;border-color:var(--accent)}.landing .features{display:flex;gap:18px;color:var(--muted);font-size:13px;flex-wrap:wrap;justify-content:center}.room{display:flex;flex-direction:column;height:100%}.room-header{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--border);flex-shrink:0}.room-header .title{font-weight:600}.room-header .code{color:var(--muted);font-size:13px}.room-header .spacer{flex:1}.room-header .online{color:var(--ok);font-size:13px}.nick{background:var(--input);border:1px solid var(--border);border-radius:8px;padding:6px 10px;color:var(--text);font-size:14px;width:140px}.nick:focus{outline:none;border-color:var(--accent)}.room-body{flex:1;display:flex;min-height:0}.stage{flex:1;display:flex;flex-direction:column;min-width:0;padding:12px;gap:12px}.prejoin{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:var(--panel);border-radius:16px}.prejoin .big{font-size:52px}.prejoin .hint{color:var(--muted);max-width:360px;text-align:center;line-height:1.5}.grid{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;align-content:start;overflow-y:auto;padding:4px}.tile{background:var(--panel);border:2px solid var(--border);border-radius:16px;padding:18px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;transition:border-color .12s,box-shadow .12s}.tile.speaking{border-color:var(--speak);box-shadow:0 0 18px #43b58140}.tile .avatar{width:64px;height:64px;border-radius:50%;background:var(--panel2);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700}.tile .nm{font-size:14px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tile .st{font-size:12px;color:var(--muted);display:flex;gap:6px}.tile .st .red{color:var(--danger)}.tile.me:after{content:"вы";font-size:11px;color:var(--accent)}.ctrlbar{flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:14px;padding:14px;background:var(--panel);border-radius:16px;flex-wrap:wrap}.cbtn{width:54px;height:54px;border-radius:50%;background:var(--input);display:flex;align-items:center;justify-content:center;transition:background .15s}.cbtn:hover{background:var(--panel2)}.cbtn.off{background:var(--danger)}.cbtn.leave{background:var(--danger);width:auto;padding:0 22px;border-radius:27px}.cbtn .lbl{display:block;margin-top:6px;font-size:11px;color:var(--muted);text-align:center}.chat{width:300px;flex-shrink:0;background:var(--panel);border-left:1px solid var(--border);display:flex;flex-direction:column;min-height:0}.chat-header{padding:10px 14px;border-bottom:1px solid var(--border);color:var(--muted);font-size:13px}.chat-messages{flex:1;overflow-y:auto;padding:10px 14px;display:flex;flex-direction:column;gap:8px}.chat-msg{line-height:1.4;word-wrap:break-word}.chat-msg .who{color:var(--accent);margin-right:6px;font-size:13px}.chat-msg .txt{font-size:14px}.chat-msg.system{color:var(--muted);font-size:13px;font-style:italic}.chat-input{display:flex;gap:8px;padding:10px;border-top:1px solid var(--border)}.chat-input input{flex:1;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--input);color:var(--text);font:inherit;font-size:14px}.chat-input input:focus{outline:none;border-color:var(--accent)}.error-toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:var(--danger);color:#fff;padding:10px 20px;border-radius:12px;z-index:100;font-size:14px}@media (max-width: 800px){.room-body{flex-direction:column}.chat{width:auto;border-left:none;border-top:1px solid var(--border);height:200px}.stage{padding:8px}}