*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.container{max-width:800px;width:100%;background:#fff;border-radius:15px;box-shadow:0 10px 40px #0000004d;overflow:hidden}.header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:20px;text-align:center}.header h1{font-size:2em;margin-bottom:5px}.header p{opacity:.9;font-size:.9em}.content{padding:30px}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;font-weight:600;color:#333}.form-group input{width:100%;padding:12px;border:2px solid #e0e0e0;border-radius:8px;font-size:1em;transition:border-color .3s}.form-group input:focus{outline:none;border-color:#667eea}.btn{width:100%;padding:12px;border:none;border-radius:8px;font-size:1em;font-weight:600;cursor:pointer;transition:all .3s}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 5px 15px #667eea66}.btn-secondary{background:#f0f0f0;color:#333;margin-top:10px}.btn-secondary:hover{background:#e0e0e0}.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.code-display{background:#f8f9fa;border:2px dashed #667eea;border-radius:8px;padding:20px;text-align:center;margin-bottom:20px}.code-display .code{font-size:2em;font-weight:700;color:#667eea;letter-spacing:.1em;font-family:Courier New,monospace}.code-display .label{color:#666;margin-bottom:10px;font-size:.9em}.chat-container{display:flex;flex-direction:column;height:500px}.messages-container{flex:1;overflow-y:auto;padding:20px;background:#f8f9fa;border-radius:8px;margin-bottom:20px}.message{background:#fff;padding:12px;border-radius:8px;margin-bottom:10px;box-shadow:0 2px 5px #0000001a}.message .nickname{font-weight:700;color:#667eea;margin-bottom:5px}.message .text{color:#333;word-wrap:break-word}.message .timestamp{font-size:.75em;color:#999;margin-top:5px}.message-form{display:flex;gap:10px}.message-form input{flex:1;padding:12px;border:2px solid #e0e0e0;border-radius:8px;font-size:1em}.message-form button{padding:12px 24px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s}.message-form button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 15px #667eea66}.message-form button:disabled{opacity:.6;cursor:not-allowed}.error-message{background:#fee;color:#c33;padding:12px;border-radius:8px;margin-bottom:20px;border-left:4px solid #c33}.divider{text-align:center;margin:20px 0;position:relative}.divider:before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#e0e0e0}.divider span{background:#fff;padding:0 15px;position:relative;color:#999;font-size:.9em}.empty-state{text-align:center;color:#999;padding:40px;font-style:italic}