*{margin:0;padding:0;box-sizing:border-box}body{font-family:Roboto,sans-serif;background:#f0f2f5;color:#333;line-height:1.5}.join-container{display:flex;justify-content:center;align-items:center;height:100vh;background:linear-gradient(135deg,#000,#1a1a1a,#2c2c2c)}.join-form{background:#fff;padding:2rem;border-radius:12px;box-shadow:0 8px 20px #00000040;text-align:center;width:340px}.join-form h1{margin-bottom:1.5rem;color:#111;font-size:1.5rem;font-weight:700}.join-form input{width:100%;padding:.75rem;margin-bottom:1rem;border:1px solid #ccc;border-radius:6px;font-size:1rem;transition:border .3s ease,box-shadow .3s ease}.join-form input:focus{border-color:#555;box-shadow:0 0 6px #0003;outline:none}.join-form button{width:100%;padding:.8rem;background:#000;color:#fff;border:none;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.join-form button:hover{background:#333;transform:translateY(-2px)}.editor-container{display:flex;height:100vh;background:#f9f9f9}.sidebar{width:250px;padding:1.5rem;background:#111;color:#f1f1f1;display:flex;flex-direction:column;gap:1rem}.room-info{text-align:center;margin-bottom:1rem}.room-info h2{margin-bottom:1rem;font-size:1.2rem;font-weight:600}.copy-button{padding:.5rem 1rem;background:#222;color:#fff;border:none;border-radius:6px;cursor:pointer;transition:all .3s ease}.copy-button:hover{background:#444}.copy-success{display:block;margin-top:.5rem;color:#22c55e;font-size:.8rem}.sidebar h3{margin-bottom:.5rem;font-size:1rem;font-weight:500;color:#ddd}.sidebar ul{list-style:none;padding:0}.sidebar ul li{padding:.5rem;font-size:.9rem;background:#2c2c2c;margin-top:5px;border-radius:5px}.typing-indicator{margin-top:.5rem;font-size:.9rem;font-style:italic;color:#bbb}.language-selector{margin-top:auto;padding:.6rem;background:#222;color:#fff;border:none;border-radius:6px;font-size:.9rem}.leave-button{margin-top:1rem;padding:.8rem;background:#e74c3c;color:#fff;border:none;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.leave-button:hover{background:#c0392b;transform:translateY(-2px)}.editor-wrapper{flex-grow:1;background:#fff}.output-container{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;background:linear-gradient(135deg,#000,#1a1a1a,#2c2c2c);color:#fff;text-align:center}.output-box{width:80%;max-width:800px;background:#111;color:#0f0;padding:1rem;border-radius:8px;text-align:left;margin:1rem 0;overflow-x:auto;white-space:pre-wrap}