*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,Roboto,sans-serif}body{background:#0f1117;color:#e5e7eb}.join-page{display:flex;align-items:center;justify-content:center;height:100vh;background:#0f1117;color:#e5e7eb;gap:6rem;padding:0 6rem}.join-left{flex:1;display:flex;justify-content:center;align-items:center}.join-illustration{width:420px;max-width:100%;border-radius:12px;filter:drop-shadow(0 0 25px rgba(0,0,0,.4))}.join-right{flex:1;display:flex;flex-direction:column;justify-content:center}.brand{margin-bottom:2.5rem}.brand-title{font-size:2.5rem;font-weight:700;display:flex;align-items:baseline;gap:.3rem}.brand-main{color:#fff}.brand-accent{color:#10b981}.brand-sub{color:#9ca3af;font-size:1rem;margin-top:.3rem}.join-form{display:flex;flex-direction:column;width:100%;max-width:370px;gap:1rem}.join-form input{padding:.9rem;border:1px solid #2e313a;background:#12141b;color:#e5e7eb;border-radius:8px;font-size:.95rem}.join-form input:focus{border-color:#10b981;outline:none}.generate-btn,.join-btn{padding:.9rem;border:none;border-radius:8px;font-weight:600;cursor:pointer;font-size:.95rem;transition:.2s ease}.generate-btn{background:#1f2937;color:#10b981;border:1px solid #10b981}.generate-btn:hover,.join-btn{background:#10b981;color:#fff}.join-btn:hover{background:#0e9f6e}.editor-container{display:flex;height:100vh;background:#0d1117;color:#e5e7eb;overflow:hidden}.sidebar{width:280px;background:#151821;display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid #1e2028;padding:2rem 1.5rem}.room-info{display:flex;flex-direction:column;align-items:center;gap:1rem}.room-info h2{color:#60a5fa;font-size:1rem;font-weight:600;text-align:center;word-break:break-all;line-height:1.4}.copy-button{width:100%;padding:.75rem;background:#3b82f6;color:#fff;border:none;border-radius:8px;font-weight:600;font-size:.9rem;cursor:pointer;transition:all .2s ease}.copy-button:hover{background:#2563eb;transform:scale(1.02)}.copy-success{color:#22c55e;font-size:.85rem;margin-top:.2rem}.file-section{margin-top:2rem}.file-section h3{font-size:.95rem;color:#9ca3af;border-bottom:1px solid #2a2e37;padding-bottom:.4rem}.file-section ul{list-style:none;margin-top:1rem;display:flex;flex-direction:column;gap:.5rem;max-height:180px;overflow-y:auto}.file-section li{background:#1e212b;padding:.6rem .8rem;border-radius:6px;border:1px solid #2a2e37;font-size:.9rem;color:#d1d5db;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background .2s ease}.file-section li.active-file{background:#2563eb;color:#fff;border-color:#2563eb}.file-section li:hover{background:#242730}.delete-file{background:transparent;border:none;color:#ef4444;cursor:pointer;font-size:.9rem;padding:0 4px}.file-btn,.download-btn{margin-top:.8rem;width:100%;padding:.8rem;border:none;border-radius:8px;font-weight:600;font-size:.9rem;cursor:pointer;transition:.2s ease}.file-btn{background:#1e293b;color:#3b82f6;border:1px solid #3b82f6}.file-btn:hover{background:#3b82f6;color:#fff}.download-btn{background:#1e3a8a;color:#fff;border:none}.download-btn:hover{background:#2563eb}.user-list h3{margin-top:2rem;font-size:.95rem;color:#9ca3af;border-bottom:1px solid #2a2e37;padding-bottom:.4rem}.user-list ul{list-style:none;margin-top:1rem;display:flex;flex-direction:column;gap:.5rem;max-height:180px;overflow-y:auto}.user-list ul li{display:flex;align-items:center;gap:8px;background:#1e212b;padding:.6rem .8rem;border-radius:6px;border:1px solid #2a2e37;font-size:.9rem;color:#d1d5db}.typing-indicator{font-size:.85rem;color:#3b82f6;text-align:center;margin-top:1rem}.language-selector{width:100%;padding:.75rem;margin-top:1.5rem;background:#1f232d;color:#e5e7eb;border:1px solid #2a2e37;border-radius:8px;font-size:.9rem;cursor:pointer;transition:.2s ease}.language-selector:hover{border-color:#3b82f6}.leave-button{margin-top:1.8rem;width:100%;padding:.9rem;background:#dc2626;color:#fff;border:none;border-radius:8px;font-weight:600;font-size:.95rem;cursor:pointer;transition:all .2s ease}.leave-button:hover{background:#b91c1c;transform:scale(1.02)}.editor-wrapper{flex:1;display:flex;flex-direction:column;background:#12141b;padding:1.8rem 2rem;gap:1rem}.file-title{font-size:1rem;font-weight:600;color:#60a5fa}.editor-wrapper>div:first-child{border-radius:8px;border:1px solid #1e2028;overflow:hidden}.input-console,.output-console{width:100%;padding:.9rem;border-radius:8px;border:1px solid #2a2e37;font-family:Fira Code,monospace;font-size:.95rem;resize:none;outline:none}.input-console{background:#0e1015;color:#e5e7eb;height:80px}.output-console{background:#0e1015;color:#22c55e;height:200px}.run-btn{margin:.5rem 0;align-self:flex-start;padding:.9rem 2rem;border:none;border-radius:8px;background:#22c55e;color:#fff;font-weight:600;font-size:.95rem;cursor:pointer;transition:all .2s ease}.run-btn:hover{background:#16a34a;transform:scale(1.03)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-thumb{background:#3b3f4b;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#4b5563}.notification-container{position:fixed;top:20px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;z-index:2000}.notification{padding:10px 16px;border-radius:8px;font-size:.9rem;font-weight:500;box-shadow:0 4px 15px #00000040;background:#1c1c1ce6;color:#fff;animation:fadeDown .3s ease;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.notification.join{background:#16a34a;color:#fff}.notification.leave{background:#dc2626;color:#fff}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block}.status-dot.online{background:#22c55e}.status-dot.offline{background:#6b7280}.floating-chat{position:fixed;bottom:20px;right:25px;z-index:1000}.chat-toggle-btn{background:#10b981;color:#fff;border:none;border-radius:50%;width:55px;height:55px;font-size:1.5rem;cursor:pointer;box-shadow:0 4px 15px #00000040;transition:transform .2s ease,background .2s ease}.chat-toggle-btn:hover{background:#0ea96b;transform:scale(1.05)}.chat-window{position:absolute;bottom:70px;right:0;width:320px;height:400px;background:#1b1e27;border:1px solid #2a2e37;border-radius:10px;box-shadow:0 4px 20px #0006;display:flex;flex-direction:column;overflow:hidden;animation:fadeIn .3s ease}.chat-header{display:flex;justify-content:space-between;align-items:center;background:#10b981;color:#fff;padding:.6rem 1rem}.chat-header h3{font-size:1rem;font-weight:600}.close-btn{background:transparent;border:none;color:#fff;font-size:1.2rem;cursor:pointer;transition:.2s}.close-btn:hover{transform:scale(1.1)}.chat-box{flex:1;overflow-y:auto;background:#12141b;padding:.6rem;display:flex;flex-direction:column;gap:.4rem}.chat-message{background:#1f232d;padding:.4rem .6rem;border-radius:6px;font-size:.85rem;color:#e5e7eb}.chat-message strong{color:#3b82f6;font-weight:600}.chat-message span{font-size:.75rem;color:#9ca3af;margin-left:.5rem}.chat-input{display:flex;padding:.5rem;border-top:1px solid #2a2e37;background:#1b1e27}.chat-input input{flex:1;padding:.5rem;border-radius:6px;border:1px solid #2a2e37;background:#0f1117;color:#e5e7eb;font-size:.9rem}.chat-input input:focus{border-color:#10b981;outline:none}.chat-input button{margin-left:.5rem;background:#10b981;border:none;border-radius:6px;color:#fff;font-weight:600;padding:.5rem 1rem;cursor:pointer;transition:.2s}.chat-input button:hover{background:#0ea96b}@keyframes fadeIn{0%{transform:translateY(15px);opacity:0}to{transform:translateY(0);opacity:1}}