*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,sans-serif;background-color:#f0f0f0;color:#333}.join-container{display:flex;align-items:center;justify-content:center;height:100vh;background:linear-gradient(135deg,#6e7f80,#e0f7fa)}.join-container .join-form{background-color:#fff;padding:2rem;border-radius:8px;box-shadow:0 4px 8px #0000001a;text-align:center;width:300px}.join-container .join-form h1{margin-bottom:1.5rem;color:#333}.join-container .join-form input{width:100%;padding:.75rem;margin-bottom:1rem;border:1px solid #ddd;border-radius:4px;font-size:1rem}.join-container .join-form button{width:100%;padding:.75rem;background-color:#007bff;color:#fff;border:none;border-radius:4px;font-size:1rem;cursor:pointer;transition:background-color .3s ease}.join-container .join-form button:hover{background-color:#0056b3}.editor-container{display:flex;height:100vh}.editor-container .sidebar{width:250px;padding:1.5rem;background-color:#2e3e50;color:#fff}.editor-container .sidebar .room-info{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:1rem}.editor-container .sidebar .room-info h2{margin-bottom:.5rem;font-size:1.2rem}.editor-container .sidebar .room-info .copy-button{padding:.5rem 1rem;background-color:#4caf50;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background-color .3s ease}.editor-container .sidebar .room-info .copy-button:hover{background-color:#45a049}.editor-container .sidebar .room-info .copy-success{margin-left:.5rem;color:#65b867;font-size:.9rem}.editor-container .sidebar h3{margin-top:1.5rem;margin-bottom:.5rem;font-size:1rem}.editor-container .sidebar ul{list-style:none}.editor-container .sidebar ul li{padding:.5rem;font-size:.9rem;background:gray;margin-top:5px;border-radius:5px}.editor-container .sidebar .typing-indicator{margin-top:1rem;font-size:.9rem;color:#ccc}.editor-container .sidebar .language-selector{width:100%;padding:.5rem;margin-top:1rem;border:none;border-radius:4px;font-size:1rem;background-color:#fff;color:#333}.editor-container .sidebar .leave-button{margin-top:1rem;width:100%;padding:.75rem;background-color:#f44336;color:#fff;border:none;border-radius:4px;font-size:1rem;cursor:pointer;transition:background-color .3s ease}.editor-container .sidebar .leave-button:hover{background-color:#d32f2f}.editor-container .editor-wrapper{flex-grow:1;background-color:#fff}.run-btn{padding:.75rem 1.5rem;margin-left:.2rem;background-color:#007bff;color:#fff;border:none;border-radius:4px;font-size:1rem;cursor:pointer;transition:background-color .3s ease}.run-btn:hover{background-color:#0056b3}.output-area{width:100%;height:200px;padding:1rem;border:1px solid #ddd;border-radius:4px;font-family:monospace;background-color:#f9f9f9;color:#333;resize:none}