*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#app{width:100%;height:100%;overflow:hidden;background:#111118;font-family:Inter,system-ui,sans-serif;color:#e2e2e8}#app{display:flex;flex-direction:column}#participants-grid{flex:1;overflow-y:auto;padding:12px 12px 0;display:grid;grid-template-columns:1fr;grid-auto-rows:1fr;gap:10px;align-items:stretch}#participants-grid::-webkit-scrollbar{width:5px}#participants-grid::-webkit-scrollbar-track{background:transparent}#participants-grid::-webkit-scrollbar-thumb{background:#3a3a52;border-radius:4px}.participant-card{position:relative;background:#1c1c2a;border-radius:10px;border:2px solid #2a2a3e;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:border-color .2s;min-height:140px}.participant-card.streaming{border-color:#7c3aed}.avatar-placeholder{display:flex;flex-direction:column;align-items:center;gap:8px}.avatar-circle{width:52px;height:52px;border-radius:50%;background:#7c3aed;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:#fff;-webkit-user-select:none;user-select:none}.participant-name{font-size:12px;color:#a0a0b8;text-align:center;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.participant-card video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;border-radius:8px}.card-controls{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:8px;padding:8px 10px;background:linear-gradient(transparent,#000000bf);opacity:0;transition:opacity .2s;border-radius:0 0 8px 8px}.participant-card:hover .card-controls{opacity:1}.stream-label{font-size:11px;color:#ccc;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.volume-control{display:flex;align-items:center;gap:5px;color:#ccc}.volume-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:64px;height:3px;border-radius:2px;background:#ffffff4d;outline:none;cursor:pointer}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#7c3aed;cursor:pointer}.fullscreen-btn{background:#ffffff1f;border:none;border-radius:5px;color:#fff;cursor:pointer;padding:4px 6px;display:flex;align-items:center;transition:background .15s}.fullscreen-btn:hover{background:#7c3aed99}#bottom-bar{height:56px;display:flex;align-items:center;justify-content:center;background:#16161f;border-top:1px solid #2a2a3e;flex-shrink:0}#broadcast-btn{display:flex;align-items:center;gap:6px;background:#7c3aed;color:#fff;border:none;border-radius:8px;padding:9px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s,transform .1s}#broadcast-btn:hover{background:#6d28d9}#broadcast-btn:active{transform:scale(.97)}#fullscreen-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000;z-index:100;display:flex;align-items:center;justify-content:center}#fullscreen-overlay.hidden{display:none}#fullscreen-video{width:100%;height:100%;object-fit:contain}#fullscreen-controls{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:12px;padding:14px 20px;background:linear-gradient(transparent,#000c);opacity:0;transition:opacity .2s}#fullscreen-overlay:hover #fullscreen-controls{opacity:1}#fullscreen-label{font-size:13px;color:#ccc;flex:1;font-weight:500}#fullscreen-controls .volume-control{color:#fff}#fullscreen-controls .volume-slider{width:100px}#fullscreen-exit-btn{display:flex;align-items:center;gap:6px;background:#ffffff1f;border:none;border-radius:7px;color:#fff;cursor:pointer;padding:7px 12px;font-size:13px;font-weight:500;transition:background .15s}#fullscreen-exit-btn:hover{background:#7c3aedb3}