*{box-sizing:border-box}
body{margin:0;font-family:Arial,sans-serif;background:#f6f3f8;color:#241b2b}
a{text-decoration:none;color:#7a3cff}
header{height:64px;background:#fff;border-bottom:1px solid #eee;display:flex;align-items:center;gap:18px;padding:0 18px;position:sticky;top:0;z-index:2}
header nav{margin-left:auto;display:flex;gap:14px}
header span{margin-left:auto;font-size:13px}
main{max-width:900px;margin:auto;padding:24px}
.landing{max-width:650px;margin:10vh auto;text-align:center;padding:25px}
.logo{font-size:60px}
.landing h1{font-size:42px;margin:10px}
.landing p{color:#6d6472;font-size:18px}
.actions{display:flex;gap:12px;justify-content:center;margin:25px 0}
.btn,.chatbtn{display:inline-block;border:0;border-radius:12px;padding:13px 18px;background:#7a3cff;color:#fff;font-weight:700;cursor:pointer}
.secondary{background:#222}
.plans,.plancards{display:flex;gap:15px;justify-content:center;flex-wrap:wrap;margin-top:25px}
.plans div,.plan,.hero,.card{background:#fff;border-radius:18px;padding:20px;box-shadow:0 5px 20px #0000000d}
.plans div{min-width:140px}
.plans strong,.plan strong{display:block;font-size:26px;margin:8px}
.auth{max-width:460px;margin:6vh auto}
.auth form{display:grid;gap:12px}
input,textarea{width:100%;padding:13px;border:1px solid #ddd;border-radius:10px;font-size:16px}
textarea{min-height:90px}
.error,.success,.note{padding:12px;border-radius:10px;margin:12px 0;background:#fff0f0}
.success{background:#effff2}
.usergrid{display:grid;gap:10px}
.user{background:#fff;border-radius:15px;padding:12px;display:flex;align-items:center;gap:12px}
.user>div:nth-child(2){display:grid;gap:3px;flex:1}
.user small{color:#777}
.avatar,.bigavatar{width:52px;height:52px;border-radius:50%;background:#eee;display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:28px}
.avatar img,.bigavatar img{width:100%;height:100%;object-fit:cover}
.bigavatar{width:100px;height:100px;margin:10px auto 20px}
.online{color:#19a44a;font-size:12px}
.offline{color:#999;font-size:12px}
.chatwrap{padding-bottom:95px}
.messages{height:calc(100vh - 145px);overflow-y:auto;padding:12px}
.bubble{background:#fff;padding:10px 13px;border-radius:15px 15px 15px 4px;max-width:75%;margin:8px 0;box-shadow:0 2px 7px #0000000b}
.bubble.mine{margin-left:auto;background:#eadfff;border-radius:15px 15px 4px 15px}
.bubble small{display:block;color:#777;font-size:10px;margin-top:5px}
.chatform{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #ddd;padding:10px;display:flex;gap:7px}
.chatform #message{flex:1}
.chatform input[type=file]{max-width:115px}
.chatimg{max-width:220px;border-radius:10px;margin-top:5px}
@media(max-width:600px){
 main{padding:14px}
 .chatform{flex-wrap:wrap}
 .chatform input[type=file]{max-width:100%}
 .chatform #message{width:65%}
 .landing h1{font-size:34px}
}