:root{font-family:Inter,"Segoe UI",Arial,sans-serif;color:#182332;background:#07131f;--orange:#ff7a1a;--orange2:#ff4d16;--blue:#0b9de0;--muted:#74808d;--line:#e8edf2}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;min-height:100vh}body.modal-open{overflow:hidden}button,input{font:inherit}button{cursor:pointer}
.auth-view{min-height:100vh;padding:28px;background:#07131f radial-gradient(circle at 4% 12%,#ff731c2c,transparent 30%)}
.auth-shell{min-height:calc(100vh - 56px);max-width:1320px;margin:auto;display:grid;grid-template-columns:minmax(430px,1.08fr) minmax(440px,.92fr);overflow:hidden;border:1px solid #ffffff14;border-radius:32px;background:#0b1824;box-shadow:0 30px 90px #0008}
.auth-intro{position:relative;display:flex;flex-direction:column;padding:48px 64px;color:#fff;overflow:hidden;background:radial-gradient(circle at 78% 20%,#063f55 0,transparent 35%),radial-gradient(circle at 16% 85%,#4f2514 0,transparent 35%),linear-gradient(145deg,#09131d,#0b1d2a 65%,#07131f)}
.auth-intro:after{content:"";position:absolute;right:-130px;bottom:-180px;width:480px;height:480px;border:1px solid #159ad629;border-radius:50%;box-shadow:0 0 0 55px #159ad60c,0 0 0 110px #ff771808}
.auth-brand{position:relative;z-index:1;display:flex;align-items:center;gap:14px;font-size:24px;font-weight:900;letter-spacing:-.5px}.auth-brand img{width:60px;height:54px;object-fit:contain}
.auth-copy{position:relative;z-index:1;margin:auto 0;max-width:640px}.eyebrow{display:block;margin-bottom:22px;color:#ff9a50;font-size:12px;font-weight:900;letter-spacing:2px}.auth-copy h1{margin:0;font-size:clamp(46px,5.3vw,74px);line-height:1.03;letter-spacing:-3px}.auth-copy h1 em{font-style:normal;color:#25baf0}.auth-copy p{max-width:550px;margin:26px 0 0;color:#a9b8c7;font-size:18px;line-height:1.7}
.auth-points{position:relative;z-index:1;display:flex;gap:36px;margin-bottom:34px}.auth-points>div{display:flex;align-items:center;gap:12px}.auth-points>div>span{width:30px;height:30px;display:grid;place-items:center;border:1px solid #31bff062;border-radius:50%;color:#40c7f2;background:#0c5d713c}.auth-points p{margin:0}.auth-points strong,.auth-points small{display:block}.auth-points strong{font-size:13px}.auth-points small{margin-top:3px;color:#7f93a5;font-size:11px}.copyright{position:relative;z-index:1;color:#637587;font-size:11px}
.auth-panel{display:grid;place-items:center;padding:46px;background:#f6f8fb}.auth-mobile-brand{display:none}.auth-card{width:min(440px,100%)}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;margin-bottom:38px;padding:4px;border:1px solid #e3e9ef;border-radius:15px;background:#eef2f6}.auth-tab{border:0;border-radius:11px;padding:11px 16px;color:#75808d;background:transparent;font-size:14px;font-weight:800}.auth-tab.active{color:#182332;background:#fff;box-shadow:0 4px 14px #19273613}
.form-heading{margin-bottom:29px}.form-heading h2{margin:0;font-size:30px;letter-spacing:-1px}.form-heading p{margin:8px 0 0;color:#788492}.auth-form label{display:block;margin:17px 0 0;color:#303b48;font-size:13px;font-weight:800}.input-wrap{position:relative;display:block;margin-top:8px}.input-wrap input{width:100%;height:52px;padding:0 58px 0 44px;border:1px solid #dfe5eb;border-radius:13px;outline:none;color:#1f2b38;background:#fff;transition:.2s}.input-wrap input::placeholder{color:#adb6bf}.input-wrap input:focus{border-color:#18a9df;box-shadow:0 0 0 4px #0d9edb13}.field-icon{position:absolute;z-index:1;left:16px;top:50%;transform:translateY(-50%);color:#87939f;font-size:15px}.password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);padding:8px;border:0;color:#70808f;background:transparent;font-size:11px;font-weight:800}
.primary-btn{width:100%;height:53px;display:flex;align-items:center;justify-content:center;gap:14px;margin-top:22px;border:0;border-radius:13px;color:#fff;background:linear-gradient(105deg,var(--orange),var(--orange2));font-weight:900;box-shadow:0 13px 26px #ff641a29;transition:transform .18s,box-shadow .18s}.primary-btn:hover{transform:translateY(-1px);box-shadow:0 16px 30px #ff641a38}.primary-btn:disabled{cursor:wait;opacity:.65;transform:none}.primary-btn b{font-size:20px}.form-message{min-height:18px;margin-top:12px;font-size:13px;line-height:1.4}.form-message.error{color:#c83838}.form-message.success{padding:12px;border:1px solid #bce7d1;border-radius:10px;color:#16764a;background:#edfbf4}.form-switch{text-align:center;margin:22px 0 0;color:#7d8895;font-size:13px}.form-switch button{padding:0;border:0;color:#e75d1e;background:none;font-weight:900}.approval-note{display:flex;gap:8px;align-items:flex-start;margin:14px 0 0;color:#7b8793;font-size:11px;line-height:1.45}.approval-note span{width:17px;height:17px;flex:none;display:grid;place-items:center;border-radius:50%;color:#1a8ec0;background:#dff3fb;font-weight:900}
.app-shell{height:100vh;display:grid;grid-template-columns:370px 1fr;background:#f1f5f8}.sidebar{min-height:0;display:flex;flex-direction:column;border-right:1px solid var(--line);background:#fff}.sidebar-head{height:72px;display:flex;align-items:center;justify-content:space-between;padding:10px 18px;border-bottom:1px solid #edf1f4}.mini-brand{display:flex;align-items:center;gap:10px;color:#172331;font-size:20px;font-weight:900}.mini-brand img{width:46px;height:42px;object-fit:contain}.round-btn,.logout-btn,.back-btn{border:0;background:transparent}.round-btn{width:39px;height:39px;border-radius:12px;color:#526170;background:#f3f6f8;font-size:20px}
.profile-row{display:flex;align-items:center;gap:11px;padding:17px 18px}.avatar{width:44px;height:44px;flex:none;display:grid;place-items:center;border:0;border-radius:15px;color:#fff;background:linear-gradient(135deg,#ff7b18,#0b9cdd);background-position:center;background-size:cover;font-weight:900;box-shadow:0 6px 15px #0b9cdd22}.avatar.has-photo{background-color:#e9eef2}.avatar-edit{position:relative;padding:0}.avatar-edit:after{content:'✎';position:absolute;right:-4px;bottom:-4px;width:19px;height:19px;display:grid;place-items:center;border:2px solid #fff;border-radius:50%;color:#fff;background:#117faf;font-size:9px}.avatar-edit.uploading{opacity:.55;cursor:wait}.profile-copy,.peer-copy{min-width:0;flex:1}.profile-copy strong,.profile-copy small,.peer-copy strong,.peer-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-copy small,.peer-copy small{margin-top:4px;color:#84909c;font-size:11px}.change-avatar-link{margin-top:4px;padding:0;border:0;color:#1688b8;background:transparent;font-size:10px;font-weight:800}.logout-btn{width:34px;height:34px;color:#d76730;font-size:20px}
.install-app-btn{width:calc(100% - 32px);display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;margin:-5px 16px 13px;padding:10px 12px;border:1px solid #bde8f7;border-radius:13px;text-align:left;color:#1479a5;background:linear-gradient(105deg,#effaff,#fff6ee)}.install-app-btn>span:first-child{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;color:#fff;background:linear-gradient(135deg,#0aa5df,#1478d2);font-size:19px;font-weight:900}.install-app-btn strong,.install-app-btn small{display:block}.install-app-btn strong{font-size:12px}.install-app-btn small{margin-top:3px;color:#778b98;font-size:10px}.install-app-btn>b{font-size:24px;font-weight:400}
.side-nav{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 16px 13px;padding:4px;border-radius:13px;background:#f1f4f7}.side-nav button{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 8px;border:0;border-radius:10px;color:#7b8793;background:transparent;font-size:12px;font-weight:900}.side-nav button.active{color:#147fae;background:#fff;box-shadow:0 3px 12px #20304012}.side-nav button b{min-width:18px;height:18px;display:grid;place-items:center;padding:0 5px;border-radius:99px;color:#fff;background:#ef5b22;font-size:10px}
.search-box{position:relative;margin:0 16px 10px}.search-box span{position:absolute;left:14px;top:9px;color:#84919e;font-size:22px}.search-box input{width:100%;height:44px;padding:0 14px 0 42px;border:1px solid transparent;border-radius:13px;outline:0;background:#f3f6f8}.search-box input:focus{border-color:#3bb4df;background:#fff}.list-heading{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;color:#7b8794;font-size:11px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase}.list-heading b,.badge{min-width:22px;height:22px;padding:0 6px;display:grid;place-items:center;border-radius:99px;color:#fff;background:#f15f24;font-size:11px}
.conversations{overflow:auto}.conversation{display:grid;grid-template-columns:46px 1fr auto;gap:12px;padding:13px 16px;border-left:3px solid transparent;cursor:pointer;transition:.15s}.conversation:hover{background:#f6f9fb}.conversation.active{border-left-color:#0a9ddd;background:#edf8fc}.conversation .meta{min-width:0}.conversation strong,.conversation .meta span{display:block}.conversation strong{font-size:14px}.conversation .meta span{margin-top:5px;overflow:hidden;color:#7b8794;font-size:12px;white-space:nowrap;text-overflow:ellipsis}.conversation .side{display:flex;flex-direction:column;align-items:flex-end;gap:5px}.conversation time{color:#98a2ac;font-size:10px}.conversation-actions{display:flex;align-items:center;gap:5px}.delete-chat{width:22px;height:22px;padding:0;border:0;border-radius:7px;color:#9aa4ae;background:transparent;font-size:15px}.conversation:hover .delete-chat{color:#d25c42;background:#feece8}.contact-section{padding:11px 17px 7px;color:#87929d;font-size:10px;font-weight:900;letter-spacing:1px;text-transform:uppercase}
.person-result{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid #f0f3f6}.person-result .person-copy{min-width:0}.person-result strong,.person-result small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.person-result strong{font-size:14px}.person-result small{margin-top:5px;color:#7b8794;font-size:12px}.person-action{min-width:74px;padding:9px 11px;border:0;border-radius:10px;color:#fff;background:linear-gradient(115deg,#ff7a19,#f0521b);font-size:11px;font-weight:900}.person-action.chat-action{background:linear-gradient(115deg,#0aa2dd,#1577d2)}.person-action.accept-action{background:#249f67}.person-action:disabled{cursor:default;color:#7d8995;background:#edf1f4}.search-status{padding:42px 20px;text-align:center;color:#82909d;font-size:13px;line-height:1.55}.search-status b{display:block;margin-bottom:5px;color:#334150}
.chat-stage{min-width:0;background:#f3f6f9 radial-gradient(circle at 50% 50%,#fff,transparent 65%)}.empty-chat{height:100%;display:grid;place-content:center;text-align:center}.empty-logo{width:132px;height:132px;display:grid;place-items:center;margin:auto;border-radius:35px;background:#fff;box-shadow:0 24px 60px #25364812}.empty-logo img{width:100px}.empty-chat h2{margin:26px 0 8px;font-size:25px}.empty-chat p{margin:0;color:#85919d}.active-chat{height:100%;display:grid;grid-template-rows:72px 1fr 80px}.chat-head{display:flex;align-items:center;gap:12px;padding:10px 24px;border-bottom:1px solid var(--line);background:#fff}.peer-copy small i{width:7px;height:7px;display:inline-block;border-radius:50%;background:#38bd79}.back-btn{display:none;font-size:21px}
.messages{overflow:auto;padding:28px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(#f5f8fae8,#f5f8fae8),radial-gradient(circle,#c8d3dc 1px,transparent 1px);background-size:auto,22px 22px}.bubble{max-width:min(70%,620px);padding:11px 14px;border:1px solid #e0e6eb;border-radius:6px 18px 18px 18px;color:#293542;background:#fff;box-shadow:0 5px 16px #15202b0b;line-height:1.45}.bubble.mine{align-self:flex-end;border:0;border-radius:18px 6px 18px 18px;color:#fff;background:linear-gradient(135deg,#099bdc,#1677d3)}.bubble time{display:block;margin-top:5px;font-size:9px;opacity:.65}.bubble.attachment-bubble{padding:7px;overflow:hidden}.chat-image,.chat-video{display:block;width:min(360px,60vw);max-height:360px;border-radius:13px;object-fit:contain;background:#09131d}.attachment-caption{display:flex;align-items:center;gap:10px;min-width:220px;padding:8px;color:inherit;text-decoration:none}.attachment-icon{width:40px;height:40px;display:grid;place-items:center;flex:none;border-radius:11px;color:#176f9a;background:#e8f6fc;font-size:20px}.mine .attachment-icon{color:#fff;background:#ffffff26}.attachment-caption span{min-width:0}.attachment-caption strong,.attachment-caption small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.attachment-caption small{margin-top:3px;font-size:10px;opacity:.7}
.composer{position:relative;display:grid;grid-template-columns:50px 50px 1fr auto;gap:10px;padding:14px 20px;border-top:1px solid var(--line);background:#fff}.composer input{min-width:0;height:50px;padding:0 18px;border:1px solid #dfe5ea;border-radius:16px;outline:0;background:#f7f9fb}.composer input:focus{border-color:#20a9da;background:#fff}.composer button{border:0;border-radius:15px;font-weight:900}.composer .send-btn{min-width:104px;color:#fff;background:linear-gradient(115deg,#ff7a19,#f0521b)}.composer .send-btn span{margin-left:5px}.composer .attach-btn,.composer .sticker-btn{min-width:0;color:#1684b5;background:#eaf7fc;font-size:28px;font-weight:400}.composer .sticker-btn{color:#d96422;background:#fff2e9}.composer .attach-btn:disabled{opacity:.5}.upload-status{position:absolute;left:20px;right:20px;bottom:70px;padding:9px 12px;border:1px solid #d8e8ef;border-radius:10px;color:#40758d;background:#effaff;box-shadow:0 6px 18px #1233}.notice-empty{padding:42px 20px;text-align:center;color:#82909d;font-size:13px}.sticker-panel{position:absolute;z-index:20;left:20px;bottom:76px;width:min(390px,calc(100vw - 28px));padding:12px;border:1px solid #dfe6eb;border-radius:18px;background:#fff;box-shadow:0 16px 45px #1725322b}.sticker-tabs{display:flex;gap:6px;overflow:auto;padding-bottom:10px}.sticker-tabs button{flex:none;padding:7px 10px;border:0;border-radius:9px;color:#74818d;background:#f1f4f6;font-size:10px}.sticker-tabs button.active{color:#fff;background:#128dc2}.sticker-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}.sticker-grid button{height:48px;padding:0;border:0;border-radius:11px;background:#f8fafb;font-size:29px;transition:.15s}.sticker-grid button:hover{transform:scale(1.12);background:#eef8fc}.sticker-message{align-self:flex-start;min-width:82px;padding:4px 8px;text-align:center;font-size:58px;line-height:1.15}.sticker-message.mine{align-self:flex-end}.sticker-message time{display:block;margin-top:4px;color:#7c8995;font-size:9px}
.install-guide{position:fixed;z-index:1000;inset:0;display:grid;align-items:end}.install-guide-backdrop{position:absolute;inset:0;background:#06101bc9;backdrop-filter:blur(4px)}.install-guide-sheet{position:relative;width:min(520px,100%);margin:0 auto;padding:14px 24px calc(24px + env(safe-area-inset-bottom));border-radius:26px 26px 0 0;color:#1c2936;background:#fff;box-shadow:0 -20px 70px #0005;animation:sheet-up .25s ease-out}.sheet-handle{width:42px;height:5px;margin:0 auto 18px;border-radius:99px;background:#dce2e7}.sheet-close{position:absolute;right:18px;top:18px;width:34px;height:34px;border:0;border-radius:50%;color:#667481;background:#eef2f5;font-size:22px}.install-guide-sheet>img{width:76px;height:76px;display:block;margin:0 auto 14px;object-fit:contain}.install-guide-sheet h2{margin:0;text-align:center;font-size:24px}.install-guide-sheet>p{margin:8px 0 22px;text-align:center;color:#75818d;font-size:13px;line-height:1.5}.install-steps{display:grid;gap:13px;margin:0;padding:0;list-style:none}.install-steps li{display:grid;grid-template-columns:32px 1fr;align-items:center;gap:11px;padding:12px;border:1px solid #e8edf1;border-radius:14px;background:#f8fafb}.install-steps li>b{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;color:#fff;background:linear-gradient(135deg,#ff7b18,#f04e19);font-size:13px}.install-steps li>span{font-size:13px;line-height:1.45}.install-steps i{display:inline-grid;width:22px;height:22px;place-items:center;border:1px solid #97cde2;border-radius:6px;color:#1686b4;font-style:normal}.guide-done{margin-top:20px}@keyframes sheet-up{from{transform:translateY(35px);opacity:.6}to{transform:none;opacity:1}}
@media(max-width:900px){.auth-view{padding:0}.auth-shell{min-height:100vh;grid-template-columns:1fr;border:0;border-radius:0}.auth-intro{display:none}.auth-panel{padding:28px 20px}.auth-mobile-brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:28px;font-size:23px}.auth-mobile-brand img{width:54px}.auth-card{max-width:460px}.app-shell{grid-template-columns:330px 1fr}}
@media(max-width:700px){.app-shell{height:100dvh;grid-template-columns:1fr;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}.sidebar{width:100%}.chat-stage{display:none}.app-shell.chat-open .sidebar{display:none}.app-shell.chat-open .chat-stage{display:block}.back-btn{display:block}.bubble{max-width:85%}.chat-head{padding:10px 14px}.messages{padding:18px 14px}.composer{padding:12px;grid-template-columns:42px 42px 1fr auto;gap:6px}.composer .send-btn{min-width:58px;padding:0 9px}.composer .send-btn span{display:none}.sticker-panel{left:8px;bottom:74px}.chat-image,.chat-video{width:min(300px,70vw)}.empty-chat{display:none}}
@media(max-width:420px){.auth-panel{padding:20px 16px}.auth-tabs{margin-bottom:28px}.form-heading h2{font-size:27px}.auth-form label{margin-top:14px}.input-wrap input{height:50px}}