*{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif}#root{min-height:100vh}.home-container{flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.home-title{color:#fff;text-align:center;margin-bottom:10px;font-size:2.5rem}.home-subtitle{color:#fffc;margin-bottom:40px;font-size:1.1rem}.join-form{background:#fff;border-radius:16px;width:100%;max-width:400px;padding:40px;box-shadow:0 10px 40px #0003}.form-group{margin-bottom:24px}.form-label{color:#333;margin-bottom:8px;font-weight:600;display:block}.form-input{border:2px solid #e1e1e1;border-radius:8px;width:100%;padding:12px 16px;font-size:16px;transition:border-color .3s}.form-input:focus{border-color:#667eea;outline:none}.join-button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:8px;width:100%;padding:14px;font-size:16px;font-weight:600;transition:transform .2s,box-shadow .2s}.join-button:hover{transform:translateY(-2px);box-shadow:0 5px 20px #667eea66}.join-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.error-message{color:#c00;text-align:center;background:#fee;border-radius:8px;margin-bottom:16px;padding:12px}.meeting-container{background:#1a1a2e;flex-direction:column;height:100vh;display:flex}.meeting-header{color:#fff;background:#16213e;justify-content:space-between;align-items:center;padding:16px 24px;display:flex}.meeting-title{font-size:1.2rem;font-weight:600}.meeting-info{align-items:center;gap:20px;display:flex}.channel-display{background:#ffffff1a;border-radius:8px;padding:8px 16px;font-size:.9rem}.leave-button{color:#fff;cursor:pointer;background:#e74c3c;border:none;border-radius:8px;padding:10px 24px;font-weight:600;transition:background .3s}.leave-button:hover{background:#c0392b}.video-grid{flex:1;place-items:center;gap:16px;padding:16px;display:grid;overflow:auto}.video-grid.grid-0{grid-template-columns:1fr}.video-grid.grid-1{grid-template-rows:1fr;grid-template-columns:1fr}.video-grid.grid-1 .video-item{max-width:900px;max-height:500px}.video-grid.grid-2{grid-template-rows:1fr;grid-template-columns:repeat(2,1fr)}.video-grid.grid-2 .video-item{max-height:600px}.video-grid.grid-4{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(2,1fr)}.video-grid.grid-6{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(3,1fr)}.video-grid.grid-9{grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr)}.video-grid.grid-many{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));grid-auto-rows:minmax(180px,1fr);gap:12px;padding:12px}.video-item{aspect-ratio:16/9;background:#0f0f23;border-radius:12px;width:100%;min-width:0;height:100%;min-height:0;position:relative;overflow:hidden}.video-grid.grid-many .video-item{min-height:180px}.video-item video{object-fit:cover;width:100%;height:100%}.video-label{color:#fff;background:#0009;border-radius:4px;padding:4px 12px;font-size:.85rem;position:absolute;bottom:12px;left:12px}.video-status{gap:8px;display:flex;position:absolute;top:12px;right:12px}.status-icon{background:#0009;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:14px;display:flex}.status-icon.muted{background:#e74c3c}.controls{background:#16213e;justify-content:center;gap:16px;padding:20px;display:flex}.control-button{cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;font-size:24px;transition:transform .2s,background .3s;display:flex}.control-button:hover{transform:scale(1.1)}.control-button.active{color:#1a1a2e;background:#fff}.control-button.inactive{color:#fff;background:#e74c3c}.control-button.screen{color:#fff;background:#3498db}.control-button.record{color:#fff;background:#e74c3c}.control-button.record.recording{animation:1.5s infinite pulse}@keyframes pulse{0%,to{box-shadow:0 0 #e74c3cb3}50%{box-shadow:0 0 0 15px #e74c3c00}}.loading{color:#fff;flex-direction:column;justify-content:center;align-items:center;min-height:200px;display:flex}.spinner{border:4px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:40px;height:40px;margin-bottom:16px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.join-overlay{text-align:center;z-index:1000;background:#000000e6;border-radius:16px;min-width:400px;padding:40px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.join-overlay h2{color:#fff;margin-bottom:20px;font-size:1.5rem}.join-overlay .user-info,.join-overlay .room-info{color:#aaa;margin:10px 0;font-size:.9rem}.join-overlay .error{color:#e74c3c;background:#e74c3c33;border-radius:8px;margin:20px 0;padding:10px}.join-overlay .join-button{width:200px;margin-top:20px}