*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background:#0f0f23;color:#fff;line-height:1.6}.join-container{display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2,#f093fb);padding:20px;position:relative;overflow:hidden}.join-container:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="1" fill="rgba(255,255,255,0.1)"/></svg>') repeat;animation:float 20s infinite linear;pointer-events:none}@keyframes float{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}.join-form{background:#fffffff2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:3rem;border-radius:20px;box-shadow:0 20px 40px #0000001a;text-align:center;width:100%;max-width:400px;border:1px solid rgba(255,255,255,.2);position:relative;z-index:1;transition:transform .3s ease}.join-form:hover{transform:translateY(-5px)}.join-form h1{margin-bottom:2rem;color:#2c3e50;font-size:2rem;font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.join-form input{width:100%;padding:1rem 1.5rem;margin-bottom:1.5rem;border:2px solid rgba(102,126,234,.2);border-radius:12px;font-size:1rem;background:#fffc;transition:all .3s ease;color:#2c3e50}.join-form input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 4px #667eea1a;transform:scale(1.02)}.join-form input::placeholder{color:#7f8c8d}.join-form button{width:100%;padding:1rem 2rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px}.join-form button:hover{transform:translateY(-2px);box-shadow:0 10px 20px #667eea4d;background:linear-gradient(135deg,#5a67d8,#6b46c1)}.join-form button:active{transform:translateY(0)}.editor-container{display:flex;height:100vh;background:#0f0f23;overflow:hidden}.sidebar{width:300px;min-width:250px;padding:1.5rem;background:linear-gradient(180deg,#1a1a2e,#16213e,#0f3460);color:#fff;border-right:1px solid rgba(255,255,255,.1);overflow-y:auto;position:relative}.sidebar:before{content:"";position:absolute;inset:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');pointer-events:none}.sidebar>*{position:relative;z-index:1}.room-info{display:flex;flex-direction:column;align-items:center;margin-bottom:2rem;padding:1.5rem;background:#ffffff1a;border-radius:15px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}.room-info h2{margin-bottom:.5rem;font-size:1.3rem;text-align:center;background:linear-gradient(135deg,#667eea,#f093fb);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700}.connection-status{font-size:12px;padding:.3rem .8rem;border-radius:20px;margin-bottom:1rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.copy-button{padding:.7rem 1.5rem;background:linear-gradient(135deg,#3498db,#2980b9);color:#fff;border:none;border-radius:10px;cursor:pointer;transition:all .3s ease;font-weight:600;margin-bottom:.5rem}.copy-button:hover{transform:translateY(-2px);box-shadow:0 8px 16px #3498db4d;background:linear-gradient(135deg,#2980b9,#1f4e79)}.copy-success{color:#2ecc71;font-size:.9rem;font-weight:600;margin-top:.5rem;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.sidebar h3{margin:2rem 0 1rem;font-size:1.1rem;color:#f093fb;text-transform:uppercase;letter-spacing:1px;font-weight:600}.sidebar ul{list-style:none;margin-bottom:1.5rem}.sidebar li{padding:.8rem 1rem;font-size:.9rem;background:linear-gradient(135deg,#ffffff1a,#ffffff0d);margin-bottom:.5rem;border-radius:10px;border:1px solid rgba(255,255,255,.1);transition:all .3s ease;font-weight:500}.sidebar li:hover{background:linear-gradient(135deg,#667eea33,#764ba233);transform:translate(5px)}.typing-indicator{margin:1rem 0;font-size:.9rem;color:#f093fb;font-style:italic;text-align:center;min-height:1.2rem;padding:.5rem;background:#f093fb1a;border-radius:8px;border:1px solid rgba(240,147,251,.2)}.language-selector{width:100%;padding:.8rem 2.5rem .8rem .8rem;background:linear-gradient(135deg,#34495e,#2c3e50);color:#fff;border:2px solid rgba(255,255,255,.1);border-radius:10px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .3s ease;margin-bottom:1.5rem;font-family:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .7rem center;background-size:1em}.language-selector option{background:#2c3e50;color:#fff;padding:.5rem;font-weight:500;font-size:.9rem}.language-selector:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea33}.leave-button{width:100%;padding:1rem;background:linear-gradient(135deg,#e74c3c,#c0392b);color:#fff;border:none;border-radius:10px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px}.leave-button:hover{background:linear-gradient(135deg,#c0392b,#a93226);transform:translateY(-2px);box-shadow:0 8px 16px #e74c3c4d}.editor-wrapper{flex-grow:1;background:#1e1e1e;display:flex;flex-direction:column;position:relative}.run-btn{background:linear-gradient(135deg,#2ecc71,#27ae60);color:#fff;border:none;padding:1rem 2rem;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;border-radius:0;text-transform:uppercase;letter-spacing:1px;box-shadow:0 2px 10px #2ecc714d}.run-btn:hover{background:linear-gradient(135deg,#27ae60,#219a52);box-shadow:0 4px 20px #2ecc7166;transform:translateY(-1px)}.output-console{width:100%;padding:1.5rem;font-size:14px;height:200px;background:#0d1117;color:#c9d1d9;border:none;font-family:Consolas,Monaco,Lucida Console,monospace;resize:vertical;outline:none;border-top:1px solid rgba(255,255,255,.1)}.output-console::placeholder{color:#6e7681;font-style:italic}@media (max-width: 1024px){.sidebar{width:280px}.editor-wrapper{min-width:0}}@media (max-width: 768px){.editor-container{flex-direction:column;height:100vh}.sidebar{width:100%;height:auto;max-height:45vh;overflow-y:auto;padding:1rem;border-right:none;border-bottom:1px solid rgba(255,255,255,.1)}.room-info{flex-direction:row;justify-content:space-between;align-items:center;text-align:left;padding:1rem}.room-info>div:first-child{flex:1}.room-info h2{margin-bottom:.3rem;font-size:1.1rem}.copy-button{padding:.5rem 1rem;font-size:.9rem;white-space:nowrap}.sidebar h3{margin:1rem 0 .5rem;font-size:1rem}.sidebar ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.5rem}.sidebar li{text-align:center;padding:.6rem .5rem;font-size:.8rem;min-width:0}.typing-indicator{font-size:.8rem;padding:.4rem;margin:.8rem 0}.language-selector,.leave-button{padding:.7rem;font-size:.9rem;margin-bottom:1rem}.language-selector option{font-size:.9rem!important;padding:.5rem!important}.editor-wrapper{height:55vh}.output-console{height:120px;font-size:12px}.join-form{padding:2rem;max-width:350px}.join-form h1{font-size:1.7rem}}@media (max-width: 480px){.join-container{padding:10px}.join-form{padding:1.5rem;border-radius:15px;max-width:320px}.join-form h1{font-size:1.4rem;margin-bottom:1.5rem}.join-form input,.join-form button{padding:.8rem 1rem;font-size:.9rem}.sidebar{padding:.8rem;max-height:40vh}.room-info{padding:.8rem;flex-direction:column;gap:.8rem;text-align:center}.room-info h2{font-size:1rem}.sidebar ul{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}.sidebar li{font-size:.75rem;padding:.5rem .3rem}.language-selector{padding:.7rem 2.2rem .7rem .7rem;font-size:.9rem}.language-selector option{font-size:.85rem!important}.output-console{height:100px;font-size:11px;padding:.8rem}.run-btn{padding:.8rem 1.5rem;font-size:.9rem}.editor-wrapper{height:60vh}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#ffffff1a}::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#5a67d8,#6b46c1)}.connecting{animation:pulse 2s infinite}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}