*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#1a1a1a;height:100vh;overflow:hidden;color:#eee}.container{display:flex;flex-direction:column;height:100%}.video-grid{flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;padding:16px;overflow-y:auto;align-items:center;justify-items:center}.video-container{position:relative;width:100%;height:100%;min-height:200px;background:#2a2a2a;border-radius:12px;overflow:hidden;aspect-ratio:16 / 9}video{width:100%;height:100%;object-fit:cover;background:#2a2a2a;display:block}.video-container.local video{transform:scaleX(-1)}.video-label{position:absolute;bottom:8px;left:8px;background:#0009;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:500;color:#fff;pointer-events:none}.controls{display:flex;justify-content:center;gap:16px;padding:16px;background:#111;border-top:1px solid #333}button{background:#333;border:none;color:#eee;font-size:14px;font-weight:500;padding:10px 20px;border-radius:40px;cursor:pointer;transition:background .2s ease;display:inline-flex;align-items:center;gap:8px}button:hover{background:#444}button:active{background:#555}button.active{background:#d32f2f;color:#fff}@media(max-width:768px){.video-grid{grid-template-columns:1fr;gap:8px;padding:12px}button{padding:8px 16px;font-size:13px}.video-label{font-size:10px;padding:3px 8px}}.video-grid::-webkit-scrollbar{width:4px}.video-grid::-webkit-scrollbar-track{background:#2a2a2a}.video-grid::-webkit-scrollbar-thumb{background:#555;border-radius:4px}