*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;line-height:1.6;color:#333;background-color:#f5f5f5}.container{max-width:1200px;margin:0 auto;padding:20px}h1{text-align:center;margin-bottom:30px;color:#2c3e50}.video-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-bottom:30px}.video-wrapper{background-color:#fff;border-radius:8px;padding:15px;box-shadow:0 2px 4px #0000001a}.video-wrapper h3{margin-bottom:10px;color:#2c3e50;font-size:1.1em}video{width:100%;height:auto;border-radius:4px;background-color:#000;aspect-ratio:16/9}.controls{display:flex;flex-direction:column;align-items:center;gap:15px;margin-bottom:20px}button{padding:10px 20px;font-size:1em;border:none;border-radius:4px;cursor:pointer;transition:background-color .3s,transform .1s}button:disabled{background-color:#95a5a6;cursor:not-allowed}button:active{transform:scale(.98)}.device-controls{display:flex;gap:10px;width:100%;max-width:400px}select{flex:1;padding:8px;border:1px solid #ddd;border-radius:4px;background-color:#fff;font-size:.9em}.status{text-align:center;padding:10px;background-color:#fff;border-radius:4px;box-shadow:0 1px 3px #0000001a}#status{font-weight:700;color:#e74c3c}#status.connected{color:#2ecc71}@media (max-width: 768px){.container{padding:10px}.video-container{grid-template-columns:1fr}.device-controls{flex-direction:column}select{width:100%}}.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px;margin-bottom:30px;width:100%}.grid-item{background-color:#fff;border-radius:8px;padding:10px;box-shadow:0 2px 4px #0000001a;display:flex;flex-direction:column;align-items:center}.grid-item video{width:100%;aspect-ratio:16/9;background:#000;border-radius:4px}.grid-item .user-label{margin-top:8px;font-size:.95em;color:#555;word-break:break-all}.user-label{margin-top:5px;text-align:center;color:#333;font-size:14px;word-break:break-all}.user-label[title=点击修改用户名]:hover{background-color:#f0f0f0;border-radius:4px;padding:2px}.name-edit-container{padding:4px;background-color:#fff;border-radius:4px;box-shadow:0 2px 5px #0000001a}.camera-button{padding:8px 16px;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;background-color:#4caf50;color:#fff;border:none;font-size:14px;transition:background-color .3s ease}.camera-button.active{background-color:#f44336}.camera-button:disabled{opacity:.6;cursor:not-allowed}#cameraButtonIcon{font-size:18px}