*{box-sizing:border-box;margin:0;padding:0}body{color:#e0e0e0;background:#0f0f13;min-height:100vh;font-family:Segoe UI,system-ui,sans-serif}.app{max-width:1200px;margin:0 auto;padding:20px}header{text-align:center;margin-bottom:24px}header h1{color:#fff;margin-bottom:8px;font-size:28px;font-weight:600}.room-info{color:#888;justify-content:center;align-items:center;gap:10px;font-size:14px;display:flex}.room-info code{color:#a78bfa;background:#1e1e2a;border-radius:6px;padding:4px 10px;font-family:Consolas,monospace}main{grid-template-columns:1fr 340px;gap:20px;display:grid}.video-panel{flex-direction:column;gap:16px;display:flex}.videos{grid-template-columns:1fr 1fr;gap:12px;display:grid}.video-box{aspect-ratio:4/3;background:#1a1a24;border:1px solid #2a2a3a;border-radius:12px;position:relative;overflow:hidden}.video-box video{object-fit:cover;width:100%;height:100%;display:block}.video-label{color:#ccc;background:#0009;border-radius:4px;padding:3px 8px;font-size:12px;position:absolute;bottom:8px;left:10px}.controls{justify-content:center;display:flex}.btn{cursor:pointer;color:#fff;background:#3b3b50;border:none;border-radius:8px;padding:10px 24px;font-size:14px;font-weight:500;transition:background .2s}.btn:hover{background:#4a4a65}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-start{background:#22c55e}.btn-start:hover{background:#16a34a}.btn-end{background:#ef4444}.btn-end:hover{background:#dc2626}.btn-copy{background:#2a2a3a;padding:4px 12px;font-size:12px}.sidebar{flex-direction:column;gap:16px;display:flex}.stats{background:#1a1a24;border:1px solid #2a2a3a;border-radius:12px;padding:16px}.stats h3{color:#888;margin-bottom:12px;font-size:14px;font-weight:500}.stats-status{align-items:center;gap:8px;margin-bottom:14px;font-size:15px;font-weight:600;display:flex}.stats-dot{border-radius:50%;width:10px;height:10px;display:inline-block}.stats-grid{flex-direction:column;gap:6px;display:flex}.stats-row{justify-content:space-between;font-family:Consolas,monospace;font-size:13px;display:flex}.stats-row span:first-child{color:#888}.stats-row span:last-child{color:#a78bfa}.chat{background:#1a1a24;border:1px solid #2a2a3a;border-radius:12px;flex-direction:column;flex:1;min-height:200px;padding:16px;display:flex}.chat h3{color:#888;margin-bottom:10px;font-size:14px;font-weight:500}.chat-log{flex-direction:column;flex:1;gap:4px;max-height:250px;margin-bottom:10px;display:flex;overflow-y:auto}.chat-empty{color:#555;text-align:center;padding:20px 0;font-size:13px}.chat-msg{padding:4px 0;font-size:13px}.chat-msg.own .chat-author{color:#22c55e}.chat-msg.peer .chat-author{color:#a78bfa}.chat-author{font-weight:600}.chat-input{gap:8px;display:flex}.chat-input input{color:#e0e0e0;background:#0f0f13;border:1px solid #2a2a3a;border-radius:6px;outline:none;flex:1;padding:8px 12px;font-size:13px}.chat-input input:focus{border-color:#a78bfa}.chat-input .btn{padding:8px 16px;font-size:13px}@media (width<=768px){.app{padding:12px}header h1{margin-bottom:4px;font-size:20px}.room-info{flex-wrap:wrap;font-size:12px}main{grid-template-columns:1fr;gap:12px}.videos{grid-template-columns:1fr;gap:8px}.video-box{aspect-ratio:4/3}.controls{z-index:10;position:sticky;bottom:12px}.sidebar{gap:12px}.stats,.chat{padding:12px}.chat-log{max-height:150px}}