*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#0a0a0f;--bg2:#12121a;--bg3:#1a1a25;--primary:#00d9ff;--primary2:#0099ff;--accent:#ff006e;--text:#fff;--text2:#a0a0b0;--glass:rgba(255,255,255,0.05);--border:rgba(255,255,255,0.1)}
body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}
a{text-decoration:none;color:inherit}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:12px;font-weight:600;transition:all .3s;cursor:pointer;border:none;font-size:14px}
.btn.primary{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#000}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,217,255,0.3)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn.ghost:hover{background:var(--glass);border-color:var(--primary)}
.btn.outline{background:transparent;border:2px solid var(--primary);color:var(--primary)}
.btn.outline:hover{background:var(--primary);color:#000}
.btn.big{padding:16px 32px;font-size:16px;border-radius:16px}
.btn.glow{box-shadow:0 0 30px rgba(0,217,255,0.4)}
.landing{position:relative}
.particles{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.particle{position:absolute;width:4px;height:4px;background:var(--primary);border-radius:50%;opacity:0;animation:float 5s infinite}
@keyframes float{0%,100%{opacity:0;transform:translateY(0)}50%{opacity:.6;transform:translateY(-100px)}}
.orb{position:fixed;border-radius:50%;filter:blur(80px);opacity:.15;pointer-events:none;z-index:0}
.orb1{width:600px;height:600px;background:var(--primary);top:-200px;left:-200px;animation:orb1 15s infinite}
.orb2{width:500px;height:500px;background:var(--accent);bottom:-200px;right:-200px;animation:orb2 20s infinite}
.orb3{width:400px;height:400px;background:#7c3aed;top:50%;left:50%;transform:translate(-50%,-50%);animation:orb3 12s infinite}
@keyframes orb1{0%,100%{transform:translate(0,0)}50%{transform:translate(100px,50px)}}
@keyframes orb2{0%,100%{transform:translate(0,0)}50%{transform:translate(-80px,-60px)}}
@keyframes orb3{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.2)}}
.nav{position:fixed;top:0;left:0;right:0;padding:20px 40px;display:flex;justify-content:space-between;align-items:center;z-index:100;background:rgba(10,10,15,0.8);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.logo{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:700}
.logo-icon{font-size:28px}
.nav-btns{display:flex;gap:12px}
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;gap:80px;padding:120px 40px 40px;position:relative;z-index:1}
.hero-text{max-width:500px}
.hero-text h1{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
.hero-text .sub{font-size:18px;color:var(--text2);font-weight:400}
.hero-text .main{font-size:72px;font-weight:800;line-height:1}
.hero-text .sub2{font-size:24px;color:var(--text2);font-weight:400}
.gradient{background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-text p{color:var(--text2);font-size:18px;line-height:1.6;margin-bottom:32px}
.cta{display:flex;gap:16px;flex-wrap:wrap}
.hero-visual{position:relative}
.chat-demo{width:380px;background:var(--bg2);border-radius:24px;overflow:hidden;border:1px solid var(--border);box-shadow:0 40px 80px rgba(0,0,0,0.5)}
.demo-head{padding:16px 20px;background:var(--bg3);display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border)}
.dots{display:flex;gap:6px}
.dots span{width:12px;height:12px;border-radius:50%;background:#ff5f57}
.dots span:nth-child(2){background:#ffbd2e}
.dots span:nth-child(3){background:#28ca41}
.demo-head>span{font-weight:600;margin-left:auto}
.demo-msgs{padding:20px;display:flex;flex-direction:column;gap:16px;min-height:280px}
.dmsg{display:flex;align-items:flex-end;gap:10px;opacity:0;animation:msgIn .5s forwards}
.dmsg.right{flex-direction:row-reverse}
.a1{animation-delay:.5s}.a2{animation-delay:1.5s}.a3{animation-delay:2.5s}.a4{animation-delay:3.5s}
@keyframes msgIn{to{opacity:1;transform:translateY(0)}from{opacity:0;transform:translateY(10px)}}
.av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0}
.bub{background:var(--bg3);padding:12px 16px;border-radius:16px;max-width:200px;font-size:14px}
.dmsg.right .bub{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#000}
.demo-input{margin:0 20px 20px;padding:14px 20px;background:var(--bg3);border-radius:12px;display:flex;justify-content:space-between;align-items:center;color:var(--text2);font-size:14px}
.send-icon{color:var(--primary)}
.features{display:flex;justify-content:center;gap:40px;padding:60px 40px;flex-wrap:wrap;position:relative;z-index:1}
.feat{text-align:center;padding:30px;background:var(--glass);border:1px solid var(--border);border-radius:20px;min-width:200px;transition:all .3s}
.feat:hover{transform:translateY(-5px);border-color:var(--primary)}
.feat-icon{font-size:40px;margin-bottom:16px}
.feat h3{margin-bottom:8px}
.feat p{color:var(--text2);font-size:14px}
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px;position:relative;z-index:1}
.auth-box{width:100%;max-width:420px;background:var(--bg2);border:1px solid var(--border);border-radius:24px;padding:40px}
.auth-box h1{text-align:center;margin-bottom:8px;font-size:28px}
.auth-box .subtitle{text-align:center;color:var(--text2);margin-bottom:32px}
.form-group{margin-bottom:20px}
.form-group label{display:block;margin-bottom:8px;font-weight:500;font-size:14px}
.form-group input[type="text"],.form-group input[type="password"]{width:100%;padding:14px 18px;background:var(--bg3);border:1px solid var(--border);border-radius:12px;color:var(--text);font-size:16px}
.form-group input:focus{outline:none;border-color:var(--primary)}
.avatar-upload{display:flex;flex-direction:column;align-items:center;gap:12px}
.avatar-preview{width:100px;height:100px;border-radius:50%;background:var(--bg3);border:3px dashed var(--border);display:flex;align-items:center;justify-content:center;font-size:36px;overflow:hidden;cursor:pointer}
.avatar-preview:hover{border-color:var(--primary)}
.avatar-preview img{width:100%;height:100%;object-fit:cover}
.color-pick{display:flex;align-items:center;gap:12px}
.color-pick input{width:50px;height:40px;border:none;border-radius:8px;cursor:pointer;background:transparent}
.auth-box .btn{width:100%;justify-content:center;padding:16px;font-size:16px;margin-top:10px}
.auth-box .link{text-align:center;margin-top:24px;color:var(--text2);font-size:14px}
.auth-box .link a{color:var(--primary);font-weight:600}
.error{background:rgba(255,0,110,0.1);border:1px solid var(--accent);color:var(--accent);padding:12px 16px;border-radius:12px;margin-bottom:20px;font-size:14px}
.success{background:rgba(0,217,255,0.1);border:1px solid var(--primary);color:var(--primary);padding:12px 16px;border-radius:12px;margin-bottom:20px;font-size:14px}
.chat-page{height:100vh;display:flex;flex-direction:column;background:var(--bg)}
.chat-head{padding:16px 24px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.chat-head .logo{font-size:20px}
.user-info{display:flex;align-items:center;gap:12px}
.user-avatar{width:40px;height:40px;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-weight:700;overflow:hidden}
.user-avatar img{width:100%;height:100%;object-fit:cover}
.user-name{font-weight:600}
.chat-head .right{display:flex;gap:12px}
.messages{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:16px}
.message{display:flex;gap:12px;max-width:70%;animation:msgSlide .3s}
@keyframes msgSlide{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.message.own{margin-left:auto;flex-direction:row-reverse}
.msg-avatar{width:40px;height:40px;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;overflow:hidden}
.msg-avatar img{width:100%;height:100%;object-fit:cover}
.msg-content{display:flex;flex-direction:column;gap:4px}
.msg-meta{display:flex;align-items:center;gap:8px;font-size:12px}
.msg-user{font-weight:600}
.msg-time{color:var(--text2)}
.msg-bubble{background:var(--bg3);padding:12px 16px;border-radius:16px;border-top-left-radius:4px;font-size:15px;line-height:1.5;word-break:break-word}
.message.own .msg-bubble{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#000;border-radius:16px;border-top-right-radius:4px}
.msg-bubble img{max-width:300px;max-height:300px;border-radius:12px;margin-top:8px;cursor:pointer}
.chat-input{padding:20px 24px;background:var(--bg2);border-top:1px solid var(--border)}
.input-box{display:flex;gap:12px;align-items:flex-end}
.input-box textarea{flex:1;padding:14px 18px;background:var(--bg3);border:1px solid var(--border);border-radius:16px;color:var(--text);font-size:15px;resize:none;min-height:50px;max-height:150px;font-family:inherit}
.input-box textarea:focus{outline:none;border-color:var(--primary)}
.input-actions{display:flex;gap:8px}
.input-btn{width:50px;height:50px;border-radius:12px;border:none;background:var(--bg3);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;transition:all .3s}
.input-btn:hover{background:var(--primary);color:#000}
.input-btn.send{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#000}
.image-preview{margin-bottom:12px;position:relative;display:inline-block}
.image-preview img{max-height:100px;border-radius:12px}
.image-preview .remove{position:absolute;top:-8px;right:-8px;width:24px;height:24px;background:var(--accent);border-radius:50%;border:none;color:#fff;cursor:pointer}
.profile-box{width:100%;max-width:500px;background:var(--bg2);border:1px solid var(--border);border-radius:24px;padding:40px}
.profile-box h1{text-align:center;margin-bottom:32px}
.current-avatar{width:120px;height:120px;border-radius:50%;margin:0 auto 24px;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:48px;overflow:hidden;border:4px solid var(--primary)}
.current-avatar img{width:100%;height:100%;object-fit:cover}
.online-users{padding:12px 24px;background:var(--bg3);border-bottom:1px solid var(--border);display:flex;gap:8px;align-items:center;overflow-x:auto}
.online-users span{color:var(--text2);font-size:13px;white-space:nowrap}
.online-dot{display:flex}
.online-user{width:32px;height:32px;border-radius:50%;background:var(--bg);border:2px solid var(--bg3);margin-left:-8px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;overflow:hidden}
.online-user:first-child{margin-left:0}
.online-user img{width:100%;height:100%;object-fit:cover}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,0.9);z-index:1000;display:none;align-items:center;justify-content:center}
.lightbox.active{display:flex}
.lightbox img{max-width:90%;max-height:90%;border-radius:12px}
.lightbox-close{position:absolute;top:20px;right:20px;width:50px;height:50px;background:var(--bg3);border:none;border-radius:50%;color:#fff;font-size:24px;cursor:pointer}
@media(max-width:900px){.hero{flex-direction:column;text-align:center;gap:40px}.cta{justify-content:center}.chat-demo{width:320px}.hero-text .main{font-size:48px}}
@media(max-width:600px){.nav{padding:16px 20px}.hero{padding:100px 20px 20px}.features{gap:20px;padding:40px 20px}.feat{min-width:140px;padding:20px}.auth-box,.profile-box{padding:24px}.message{max-width:85%}.chat-head{flex-wrap:wrap;gap:10px}}