*{margin:0;padding:0;box-sizing:border-box}body{font-family:Roboto,"sans-serif";background:#f8fafc;color:#333}.join-container{display:flex;justify-content:center;align-items:center;height:100vh;background:linear-gradient(135deg,#ffecd2,#fcb69f)}.join-container .join-form{background-color:#fff;padding:2rem;border-radius:12px;box-shadow:0 8px 20px #0000001a;text-align:center;width:320px}.join-container .join-form h1{margin-bottom:1.5rem;color:#2c3e50}.join-container .join-form input{width:100%;padding:.8rem;margin-bottom:1rem;border:1px solid #ccc;border-radius:6px;font-size:1rem;transition:border-color .3s}.join-container .join-form input:focus{border-color:#4a90e2;outline:none}.join-container .join-form button{width:100%;padding:.75rem;background-color:#4a90e2;color:#fff;border:none;border-radius:6px;font-size:1rem;cursor:pointer;transition:background-color .3s ease,transform .2s}.join-container .join-form button:hover{background-color:#357abd;transform:translateY(-2px)}.editor-container{display:flex;height:100vh}.editor-container .sidebar{width:260px;padding:1.5rem;background-color:#2d3436;color:#dfe6e9}.editor-container .sidebar .room-info{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:1.5rem}.editor-container .sidebar .room-info h2{margin-bottom:1rem;font-size:1.3rem}.editor-container .sidebar .room-info .copy-button{padding:.5rem 1rem;background-color:#00b894;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background-color .3s ease}.editor-container .sidebar .room-info .copy-button:hover{background-color:#019875}.editor-container .sidebar .room-info .copy-success{margin-left:.5rem;color:#2ecc71;font-size:.85rem}.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:#636e72;margin-top:6px;border-radius:5px;transition:background .2s}.editor-container .sidebar ul li:hover{background:#b2bec3}.editor-container .sidebar .typing-indicator{margin-top:1rem;font-size:.95rem;color:#fff;font-style:italic}.editor-container .sidebar .language-selector{margin-top:1rem;width:100%;padding:.5rem;background-color:#3d3d3d;color:#fff;border:none;border-radius:4px}.editor-container .sidebar .leave-button{margin-top:1rem;width:100%;padding:.75rem;background-color:#e74c3c;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:#c0392b}.editor-container .editor-wrapper{flex-grow:1;background-color:#fff;display:flex;flex-direction:column;overflow-y:auto}.run-btn{background-color:#27ae60;color:#fff;border:none;border-radius:4px;padding:10px;font-weight:700;cursor:pointer;transition:background .3s}.run-btn:hover{background-color:#219150}.output-console{width:100%;margin-top:10px;padding:10px;font-size:18px;height:200px;background:#f1f2f6;border:1px solid #ccc;border-radius:4px;overflow-y:auto}body::-webkit-scrollbar{display:none}.generate{cursor:pointer}.create{margin-bottom:10px}.input-console{width:100%;height:80px;margin-top:10px;padding:10px;font-family:monospace;background-color:#1e1e1e;color:#dcdcdc;border:1px solid #444;border-radius:4px;resize:none}.input-console:focus{outline:none;border-color:#4a90e2}.join-form{padding:20px}
