.landing{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2)}.landing-container{background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;padding:3rem;text-align:center;max-width:500px;width:90%;box-shadow:0 8px 32px #1f26875e}.landing-container h1{font-size:3rem;margin-bottom:.5rem}.subtitle{font-size:1.2rem;opacity:.9;margin-bottom:2rem}.description{margin-bottom:2rem;line-height:1.6;opacity:.9}.form-group{margin-bottom:1.5rem}.form-group input{width:100%;padding:1rem;border:none;border-radius:10px;background:#fff3;color:#fff;font-size:1rem;outline:none}.form-group input::placeholder{color:#ffffffb3}.form-group input:focus{background:#ffffff4d}.create-button{width:100%;padding:1rem 2rem;background:#4caf50;color:#fff;border:none;border-radius:10px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:background .3s}.create-button:hover:not(:disabled){background:#45a049}.create-button:disabled{opacity:.6;cursor:not-allowed}.room{min-height:100vh;background:#0a0a0a;display:flex;flex-direction:column;position:relative}.recording-indicator{position:absolute;top:1rem;left:1rem;background:#dc2626e6;color:#fff;padding:.5rem 1rem;border-radius:8px;display:flex;align-items:center;gap:.5rem;z-index:100;font-weight:700}.recording-dot{width:12px;height:12px;background:#fff;border-radius:50%;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.video-grid{flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:1rem;padding:1rem;align-items:center;justify-items:center}.video-container{position:relative;width:100%;max-width:800px;aspect-ratio:16 / 9;background:#1a1a1a;border-radius:12px;overflow:hidden;border:2px solid #333}.video{width:100%;height:100%;object-fit:cover}.video-label{position:absolute;bottom:.5rem;left:.5rem;background:#000000b3;color:#fff;padding:.25rem .75rem;border-radius:4px;font-size:.9rem}.controls{display:flex;justify-content:center;gap:1rem;padding:1.5rem;background:#1a1a1af2;border-top:1px solid #333}.control-button{padding:.75rem 1.5rem;border:none;border-radius:8px;background:#333;color:#fff;font-size:1.1rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:.5rem}.control-button:hover{background:#444;transform:translateY(-2px)}.control-button.muted{background:#dc2626}.control-button.disabled{background:#555;opacity:.6}.control-button.record-start{background:#dc2626;font-weight:700;font-size:1.15rem;padding:.85rem 2rem;box-shadow:0 4px 12px #dc262666}.control-button.record-start:hover{background:#b91c1c;box-shadow:0 6px 16px #dc262699}.control-button.record-stop{background:#991b1b;font-weight:700;font-size:1.15rem;padding:.85rem 2rem;box-shadow:0 4px 12px #991b1b66}.control-button.record-stop:hover{background:#7f1d1d;box-shadow:0 6px 16px #991b1b99}.control-button.leave{background:#7f1d1d}.room-join{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2)}.join-container{background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;padding:3rem;text-align:center;max-width:400px;width:90%}.join-container h2{margin-bottom:2rem}.join-container input{width:100%;padding:1rem;border:none;border-radius:10px;background:#fff3;color:#fff;font-size:1rem;margin-bottom:1rem;outline:none}.join-container input::placeholder{color:#ffffffb3}.join-container button{width:100%;padding:1rem;background:#4caf50;color:#fff;border:none;border-radius:10px;font-size:1.1rem;font-weight:700;cursor:pointer}.join-container button:hover{background:#45a049}.connection-status{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#000c;color:#fff;padding:2rem;border-radius:12px;font-size:1.2rem}.invite-panel{position:absolute;top:1rem;right:1rem;background:#1a1a1af2;border:2px solid #4CAF50;border-radius:12px;padding:1rem;z-index:100;min-width:400px;max-width:600px;box-shadow:0 4px 20px #00000080}.invite-content{display:flex;flex-direction:column;gap:.75rem}.invite-label{color:#4caf50;font-weight:700;font-size:.9rem;text-transform:uppercase;letter-spacing:.5px}.invite-link-container{display:flex;gap:.5rem;align-items:center}.invite-link-input{flex:1;padding:.75rem;background:#1a1a1a;border:1px solid #333;border-radius:6px;color:#fff;font-size:.9rem;font-family:monospace;cursor:text}.invite-link-input:focus{outline:none;border-color:#4caf50}.invite-button{padding:.75rem 1.25rem;border:none;border-radius:6px;background:#4caf50;color:#fff;font-size:.9rem;font-weight:700;cursor:pointer;transition:all .2s;white-space:nowrap;display:flex;align-items:center;gap:.5rem}.invite-button:hover{background:#45a049;transform:translateY(-1px)}.invite-button.copied{background:#22c55e}.invite-button.share-button{background:#3b82f6}.invite-button.share-button:hover{background:#2563eb}@media (max-width: 768px){.invite-panel{position:relative;top:auto;right:auto;margin:1rem;min-width:auto;max-width:100%}.invite-link-container{flex-direction:column}.invite-link-input{width:100%}.invite-button{width:100%;justify-content:center}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#1a1a1a;color:#fff}#root{min-height:100vh}