*{margin:0;padding:0;box-sizing:border-box}body{font-family:Roboto,"sans-serif";background:#f0f2f5;color:#333}.join-container{display:flex;justify-content:center;align-items:center;height:100vh;background:linear-gradient(135deg,#4257be,#7f7e80);padding:1rem}.join-container .join-form{background-color:#fff;padding:2rem;border-radius:8px;box-shadow:0 4px 6px #0000001a;text-align:center;width:100%;max-width:400px}.join-container .join-form h1{margin-bottom:1.5rem;color:#333;font-size:1.5rem}.join-container .join-form .create-id-button{margin-bottom:1rem}.join-container .join-form input,.join-container .join-form button{width:100%;min-height:44px;padding:.75rem;font-size:1rem;border-radius:4px}.join-container .join-form input{margin-bottom:1rem;border:1px solid #ddd}.join-container .join-form button{background-color:#4a90e2;color:#fff;border:none;cursor:pointer;transition:background-color .3s ease}.join-container .join-form button:hover{background-color:#357abd}@media (hover: none) and (pointer: coarse){.join-container .join-form button:active{background-color:#357abd}}.editor-container{display:flex;height:100vh}.editor-container .sidebar{width:250px;padding:1.5rem;background-color:#2c3e50;color:#ecf0f1;overflow-y:auto}.editor-container .sidebar .room-info{display:flex;flex-direction:column;align-items:center;margin-bottom:1rem}.editor-container .sidebar .room-info h2{margin-bottom:1rem;font-size:1.2rem;text-align:center;word-break:break-all}.editor-container .sidebar .room-info .copy-button{padding:.5rem 1rem;background-color:#3498db;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background-color .3s ease;min-height:44px}.editor-container .sidebar .room-info .copy-button:hover{background-color:#2980b9}@media (hover: none) and (pointer: coarse){.editor-container .sidebar .room-info .copy-button:active{background-color:#2980b9}}.editor-container .sidebar .room-info .copy-success{margin-left:.5rem;color:#26a726;font-size:.8rem}.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;word-break:break-all}.editor-container .sidebar .typing-indicator{margin-top:1rem;font-size:1rem;color:#fff;word-break:break-word}.editor-container .sidebar .language-selector,.editor-container .sidebar .leave-button{width:100%;border:none;border-radius:4px;min-height:44px;font-size:1rem;cursor:pointer;transition:background-color .3s ease}.editor-container .sidebar .language-selector{margin-top:1rem;padding:.5rem;background-color:#34495e;color:#fff}.editor-container .sidebar .leave-button{margin-top:1rem;padding:.75rem;background-color:#e74c3c;color:#fff}.editor-container .sidebar .leave-button:hover{background-color:#ab2a1c}@media (hover: none) and (pointer: coarse){.editor-container .sidebar .leave-button:active{background-color:#ab2a1c}}.editor-container .editor-wrapper{flex-grow:1;background-color:#fff;min-width:0}@media screen and (max-width: 768px){.join-container{padding:.5rem}.join-container .join-form{padding:1.5rem;margin:0 .5rem}.join-container .join-form h1{font-size:1.3rem}.join-container .join-form input,.join-container .join-form button{font-size:16px;padding:1rem}.editor-container{flex-direction:column}.editor-container .sidebar{width:100%;padding:1rem;max-height:40vh;order:1}.editor-container .sidebar .room-info h2{font-size:1rem}.editor-container .sidebar h3{margin-top:1rem;font-size:.9rem}.editor-container .sidebar ul li{font-size:.8rem;padding:.4rem}.editor-container .sidebar .typing-indicator{font-size:.9rem}.editor-container .editor-wrapper{order:2;height:60vh;min-height:300px}.monaco-editor .minimap{display:none!important}.monaco-scrollable-element .scrollbar{width:14px!important;height:14px!important}}@media screen and (max-width: 480px){.join-container .join-form{padding:1rem}.join-container .join-form h1{font-size:1.2rem}.editor-container .sidebar{padding:.8rem;max-height:35vh}.editor-container .sidebar .room-info{margin-bottom:.5rem}.editor-container .sidebar .room-info h2{font-size:.9rem;margin-bottom:.5rem}.editor-container .sidebar .room-info .copy-button{padding:.4rem .8rem;font-size:.9rem}.editor-container .sidebar h3{font-size:.85rem}.editor-container .sidebar .language-selector,.editor-container .sidebar .leave-button{padding:.6rem;font-size:.9rem}.editor-container .editor-wrapper{height:65vh}}@media screen and (max-width: 768px) and (orientation: landscape){.editor-container{flex-direction:row}.editor-container .sidebar{width:200px;max-height:100vh;order:0;padding:1rem .8rem}.editor-container .sidebar .room-info h2{font-size:.9rem}.editor-container .sidebar h3{font-size:.8rem;margin-top:.8rem}.editor-container .sidebar ul li{font-size:.75rem;padding:.3rem}.editor-container .sidebar .language-selector,.editor-container .sidebar .leave-button{padding:.5rem;font-size:.8rem;margin-top:.8rem}.editor-container .editor-wrapper{order:1;height:100vh}}@media screen and (min-width: 1200px){.editor-container .sidebar{width:280px;padding:2rem}}.run-btn{background-color:#0cd126;padding:10px}.output-console{width:100%;margin-top:10px;padding:10px;font-size:20px;height:200px}.join-container{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;background:linear-gradient(135deg,#1e2a38,#2c3e50);color:#fff}.app-header{text-align:center;margin-bottom:2rem}.code-icon{width:64px;height:64px;margin-bottom:1rem}.app-title{font-size:3rem;font-weight:700;margin-bottom:.5rem}.app-description{font-size:1.2rem;color:#ddd;max-width:600px}.join-form{display:flex;flex-direction:column;gap:1rem;background-color:#fff;padding:2rem;border-radius:8px;width:100%;max-width:400px}.join-form input{padding:.8rem;border-radius:4px;border:none;font-size:1rem}.join-form button{padding:.8rem;background-color:#667eea;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:700;transition:background .3s ease}.join-form button:hover{background-color:#5a67d8}.create-id-button{margin-bottom:1rem}@media (max-width: 768px){.app-title{font-size:2rem}.app-description{font-size:1rem}.code-icon{width:48px;height:48px}}