*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Arial,"Microsoft YaHei",sans-serif;background:#eef3f7;color:#152331}
.landing{min-height:100vh;background:#fff;color:#172533;padding:18px clamp(18px,5vw,72px) 42px}
.landingNav{display:flex;align-items:center;justify-content:space-between;gap:18px;max-width:1100px;margin:0 auto}
.navLogo{display:flex;align-items:center;gap:10px}.landingNav nav{display:flex;align-items:center;gap:18px}.landingNav a{color:#314557;text-decoration:none;font-size:14px}
.hero{display:grid;grid-template-columns:1fr 420px;align-items:center;gap:42px;max-width:1100px;margin:54px auto 36px}
.eyebrow{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:999px;background:#e7f6f4;color:#0f6e75;font-weight:700;font-size:13px;margin-bottom:16px}
.hero h1{font-size:clamp(34px,5vw,58px);line-height:1.05;margin:0 0 16px;letter-spacing:0}.hero p{font-size:20px;color:#5f7080;margin:0 0 28px;line-height:1.6}
.downloadActions{display:flex;gap:12px;flex-wrap:wrap}.downloadActions button{height:48px;padding:0 22px;border-radius:8px}
.storeBtn{display:inline-flex;align-items:center;gap:10px;background:#111d28}.storeBtn span{font-size:12px;color:#9fcbd1}.storeBtn.dark{background:#0f8aa0}.storeBtn.dark span{color:#d9fffb}
.textBtn{display:block;margin-top:14px;padding:0;background:transparent;color:#0f6e75;text-align:left;height:auto;font-weight:800}
.platforms{color:#798896;font-size:14px;margin-top:16px}
.phoneArt{position:relative;height:430px;border-radius:34px;background:linear-gradient(180deg,#f2f7fb,#fff);box-shadow:0 24px 60px rgba(25,47,68,.16);border:1px solid #dfe8ef;overflow:hidden}
.phoneTop{width:96px;height:8px;border-radius:8px;background:#cfd9e3;margin:18px auto}
.phoneHead{position:absolute;top:42px;left:28px;right:28px;height:48px;border-radius:8px;background:#fff;border:1px solid #e1e9f0;display:flex;align-items:center;padding:0 16px;font-weight:800;color:#143342}
.phoneArt img{position:absolute;width:86px;height:86px;left:50%;bottom:34px;transform:translateX(-50%);border-radius:22px;box-shadow:0 12px 24px rgba(15,138,160,.25)}
.bubble{position:absolute;width:220px;min-height:58px;border-radius:20px 20px 4px 20px;background:#0f8aa0;color:#fff;right:42px;top:136px;padding:17px 18px;font-size:14px}.bubble.left{left:36px;right:auto;top:214px;background:#e9eef3;color:#243645;border-radius:20px 20px 20px 4px}.bubble.small{width:178px;top:294px;background:#d6f4ef;color:#173746}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1100px;margin:0 auto 28px}.features article{padding:22px;border:1px solid #e2eaf1;border-radius:8px;background:#fff}.features strong{display:block;font-size:20px;margin-bottom:8px}.features span{color:#6a7b8a;line-height:1.5}
.downloadPanel{display:grid;grid-template-columns:1fr 1fr 220px;gap:14px;max-width:1100px;margin:0 auto 28px}
.downloadCard,.qrCard{padding:20px;border:1px solid #e2eaf1;border-radius:8px;background:#f7fafc}.downloadCard strong{display:block;font-size:20px;margin-bottom:8px}.downloadCard span{display:block;color:#647685;line-height:1.5;margin-bottom:14px}.downloadCard button{height:42px}
.qrCard{display:grid;place-items:center;text-align:center;gap:10px}.qrCard img{width:150px;height:150px;border-radius:8px}.qrCard span{font-size:13px;color:#647685}
.privacyBlock{max-width:1100px;margin:0 auto;padding:22px 0;border-top:1px solid #e2eaf1}.privacyBlock h2{font-size:22px;margin:0 0 8px}.privacyBlock p{margin:0;color:#647685;line-height:1.7}
.showApp .landing{display:none}
.shell{display:none;grid-template-columns:380px 1fr;height:100vh;overflow:hidden;background:#edf2f5}
.showApp .shell{display:grid}
.side{position:relative;background:#fff;border-right:1px solid #dfe6ea;overflow:hidden}
.logo{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#148a80;color:#fff;font-weight:800}
.logo.large{width:68px;height:68px;font-size:26px;box-shadow:0 10px 28px rgba(20,138,128,.25)}
input,button{height:44px;border:1px solid #ccd7dc;border-radius:8px;padding:0 13px;font:inherit;font-size:15px;letter-spacing:0}
input{width:100%;min-width:0;background:#fff;color:#14232b;outline:none}
input:focus{border-color:#148a80;box-shadow:0 0 0 3px rgba(20,138,128,.1)}
button{border:0;background:#148a80;color:#fff;font-weight:700;cursor:pointer;white-space:nowrap}
button:focus{outline:none}button:focus-visible{outline:2px solid #148a80;outline-offset:2px}
button:disabled{background:#dce4e7;color:#75848b;cursor:not-allowed}
.hidden{display:none!important}
.wide{width:100%}
.primary{background:#148a80}
.danger{background:#fff;color:#c33e46;border:1px solid #efd0d2;margin-top:18px}
.authScreen{height:100%;overflow:auto;padding:58px 28px 28px;background:#f7faf9}
.authBrand{text-align:center;margin-bottom:30px}.authBrand .logo{margin:0 auto 16px}.authBrand h1{font-size:27px;margin:0;color:#102f31}.authBrand p{margin:7px 0 0;color:#718086;font-size:14px}
.authCard{display:flex;flex-direction:column;gap:9px;max-width:340px;margin:0 auto;padding:20px;background:#fff;border:1px solid #e0e7e5;border-radius:8px;box-shadow:0 10px 30px rgba(23,55,58,.07)}
.modeTabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin-bottom:8px;background:#edf2f2;border-radius:8px}
.modeTabs button{height:36px;background:transparent;color:#68777c}.modeTabs button.active{background:#fff;color:#126f68;box-shadow:0 1px 5px rgba(30,54,56,.12)}
.fieldLabel{font-size:12px;color:#56666b;font-weight:700;margin:3px 0 -3px}
.checkLine{display:flex;align-items:center;gap:8px;color:#65757b;font-size:13px;margin:3px 0}.checkLine input{width:16px;height:16px;box-shadow:none}
#authMsg{min-height:17px;margin:1px 0 0;color:#ba3540;font-size:12px;text-align:center}#authMsg.ok,.hint.ok{color:#0b8062}
.authFoot{max-width:320px;margin:18px auto 0;text-align:center;color:#849197;font-size:12px;line-height:1.55}
.appHome{height:100%;padding-bottom:68px;overflow:auto;background:#fff}
.mobileHeader{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;height:82px;padding:18px 18px 10px;background:rgba(255,255,255,.96);border-bottom:1px solid #edf1f2}
.mobileHeader small{display:block;color:#148a80;font-size:11px;font-weight:700}.mobileHeader h1{margin:3px 0 0;font-size:25px;color:#12252c}
.roundBtn{display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;background:#eef3f3;color:#24444a;font-size:20px}
.appView{display:none;padding:14px 16px 22px}.appView.active{display:block}
.search{display:flex;gap:8px;align-items:center}.search>button{width:62px}
.searchBar{display:flex;align-items:center;gap:8px;flex:1;height:42px;padding:0 12px;background:#f0f4f5;border:1px solid transparent;border-radius:8px;color:#78888e}.searchBar:focus-within{border-color:#9ecbc6;background:#fff}.searchBar input{height:40px;padding:0;border:0;background:transparent;box-shadow:none}
.sectionTitle{display:flex;align-items:center;justify-content:space-between;min-height:28px;margin:18px 2px 7px;color:#233940;font-size:13px;font-weight:800}.sectionTitle small{color:#148a80;font-size:11px}
.badge,.navBadge{display:grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#e9535b;color:#fff;font-size:11px}
.list{border-top:1px solid #edf1f2}
.item{display:flex;align-items:center;justify-content:space-between;gap:11px;min-height:65px;padding:10px 2px;border-bottom:1px solid #edf1f2;background:#fff}
.item small{display:block;margin-top:4px;color:#7a898e;font-size:12px}.item .grow{flex:1;min-width:0}.item .grow strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#1c3037}
.item button{height:34px;padding:0 12px;font-size:12px}.item button.alt{background:#edf2f3;color:#5c6c72}
.hint{padding:18px 12px;color:#7d8b90;font-size:13px;text-align:center;border:1px dashed #d8e1e3;border-radius:8px;background:#fafcfc}
.userItem{justify-content:flex-start;cursor:pointer}
.avatar{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#2f8fa4;color:#fff;font-weight:800;flex:0 0 44px}.avatar.xl{width:76px;height:76px;flex:0 0 76px;font-size:28px;background:#148a80}
.conversationMeta{margin-left:auto;text-align:right}.conversationMeta time{display:block;color:#8b989c;font-size:11px}.unreadDot{display:inline-block;width:7px;height:7px;margin-top:8px;border-radius:50%;background:#20a584}
.sentRequests{margin-top:18px;border-top:1px solid #edf1f2}.sentRequests summary{padding:14px 2px;color:#6d7d82;font-size:13px;cursor:pointer}
.profileHero{display:flex;flex-direction:column;align-items:center;padding:18px 0 26px;border-bottom:1px solid #e8eeee}.profileHero strong{margin-top:12px;font-size:20px;color:#183137}.profileHero>span:last-child{margin-top:4px;color:#738287;font-size:13px}
.settingsGroup{margin-top:18px;border-top:1px solid #e6ecee}
.identityCard{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 2px;border-bottom:1px solid #e6ecee}.identityCard>div{min-width:0}.identityCard span,.identityCard small{display:block;color:#7a898e;font-size:11px}.identityCard strong{display:block;margin:4px 0;color:#17383b;overflow:hidden;text-overflow:ellipsis}.softBtn{height:34px;padding:0 10px;background:#e5f3f1;color:#10776f;font-size:12px}
.settingRow{display:grid;grid-template-columns:38px 1fr 14px;align-items:center;width:100%;min-height:66px;height:auto;padding:10px 2px;border-bottom:1px solid #e6ecee;border-radius:0;background:#fff;color:#21363d;text-align:left;font-weight:700}.settingRow.static{cursor:default}.settingRow small{display:block;margin-top:3px;color:#819095;font-size:11px;font-weight:400}.settingRow b{color:#9ca8ac;font-size:21px}.settingIcon{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#e4f2f0;color:#117a72}.settingIcon.shield{background:#e7f2e6;color:#387b43}.settingIcon.muted{background:#edf0f3;color:#61727a}
.bottomNav{position:absolute;left:0;right:0;bottom:0;z-index:5;display:grid;grid-template-columns:repeat(3,1fr);height:68px;padding-bottom:env(safe-area-inset-bottom);background:rgba(255,255,255,.98);border-top:1px solid #dfe6e8}
.navItem{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:67px;gap:3px;padding:0;background:transparent;color:#879398}.navItem span{font-size:20px;line-height:1}.navItem small{font-size:11px}.navItem.active{color:#148a80}.navBadge{position:absolute;top:8px;left:calc(50% + 8px)}
.chat{display:grid;grid-template-rows:auto 1fr auto auto;min-width:0;background:#e7eeed}
.top{display:flex;align-items:center;gap:10px;min-height:72px;padding:10px 16px;background:#fff;border-bottom:1px solid #dce5e4}
.top>#back{display:none}.peerBlock{display:flex;flex-direction:column;min-width:0;flex:1}.peerBlock strong{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.secureState{margin-top:3px;color:#148a80;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status{color:#7d8b90;font-size:11px}
.callActions{display:flex;gap:6px}.callActions .roundBtn{width:38px;height:38px;font-size:17px}.callActions .dangerBtn{background:#fbe9ea;color:#ca3f48}
.messages{padding:18px;overflow:auto;background-color:#e8efee;background-image:radial-gradient(#d5e1df 1px,transparent 1px);background-size:24px 24px}
.empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#76878a;text-align:center}.emptyIcon{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#dce9e7;color:#148a80;font-size:18px}.empty strong{margin-top:12px;color:#40565b}.empty p{margin:6px 0 0;font-size:13px}
.msg{max-width:70%;padding:9px 11px;margin:8px 0;border-radius:8px 8px 8px 2px;background:#fff;box-shadow:0 1px 2px rgba(26,53,54,.1);line-height:1.45;word-break:break-word}.msg span{display:block}.msg time{display:block;margin-top:5px;color:#7b898c;font-size:10px;text-align:right}.msg.mine{margin-left:auto;background:#d8f0e9;border-radius:8px 8px 2px 8px}
.composer{display:flex;align-items:center;gap:7px;padding:10px 14px max(10px,env(safe-area-inset-bottom));background:#fff;border-top:1px solid #dce5e4}.composer #text{flex:1;background:#f2f5f5;border-color:transparent}.attachBtn,.sendBtn,.recordBtn{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border-radius:50%;cursor:pointer}.attachBtn{background:#edf2f2;color:#4e656a;font-size:23px}.sendBtn{padding:0;background:#148a80;color:#fff;font-size:17px}.recordBtn{padding:0;background:#edf2f2;color:#148a80;font-size:15px}.recordBtn.recording{background:#fbe5e7;color:#d7444d;animation:pulse 1.2s infinite}
.videos{display:none;position:absolute;inset:72px 0 64px;background:#152124}.chat.calling .videos{display:grid}.videos video{width:100%;height:100%;object-fit:cover;background:#152124}.videos #local{position:absolute;right:14px;top:14px;width:120px;height:170px;border:2px solid #fff;border-radius:8px}
.mediaMessage{display:flex;align-items:center;gap:9px;min-width:170px}.mediaMessage button{width:34px;height:34px;padding:0;border-radius:50%;background:#148a80}.mediaMessage div{min-width:0}.mediaMessage strong,.mediaMessage small{display:block}.mediaMessage small{margin-top:2px;color:#728186;font-size:10px}.messageImage{display:block;max-width:240px;max-height:320px;border-radius:6px;object-fit:cover}.messageFile{display:flex;align-items:center;gap:8px;color:#116f68;text-decoration:none;font-weight:700}.messageAudio{width:230px;height:38px}
.modalBackdrop{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:20px;background:rgba(15,30,34,.55);backdrop-filter:blur(5px)}
.callModal,.voiceSheet{width:min(340px,100%);padding:28px 22px;border-radius:8px;background:#fff;text-align:center;box-shadow:0 24px 70px rgba(5,20,24,.3)}.callModal>.avatar{margin:0 auto 14px}.callModal>small{display:block;color:#148a80;font-weight:700}.callModal>strong{display:block;margin-top:5px;font-size:22px}.callModal>p{margin:7px 0 24px;color:#78878c;font-size:13px}.incomingActions{display:flex;justify-content:space-around}.callDecision{display:flex;flex-direction:column;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;font-size:22px}.callDecision small{margin-top:2px;font-size:10px}.callDecision.reject{background:#e44b54}.callDecision.accept{background:#23a277}
.voiceSheet strong{display:block;font-size:18px}.voiceSheet>span{display:block;margin:8px 0 14px;color:#148a80;font-variant-numeric:tabular-nums}.voiceSheet audio{width:100%}.sheetActions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.sheetActions button{width:100%}
.toast{position:fixed;left:50%;bottom:88px;z-index:30;max-width:calc(100% - 32px);transform:translateX(-50%);padding:10px 14px;border-radius:8px;background:#18373a;color:#fff;font-size:13px;box-shadow:0 8px 28px rgba(0,0,0,.2)}
@keyframes pulse{50%{transform:scale(.9);opacity:.7}}
@media(max-width:800px){
body{background:#fff}.landing{padding:14px 16px 28px}.landingNav nav a{display:none}.landingNav nav{gap:8px}.hero{display:block;margin:34px auto 26px}.hero h1{font-size:32px;line-height:1.12}.hero p{font-size:17px}.downloadActions{display:grid;grid-template-columns:1fr}.downloadActions button{width:100%;justify-content:center}.phoneArt{height:310px;margin-top:28px}.phoneHead{top:36px}.bubble{right:24px;top:116px;width:210px}.bubble.left{left:22px;top:188px}.bubble.small{top:250px}.features,.downloadPanel{grid-template-columns:1fr}.qrCard img{width:140px;height:140px}
.showApp .shell{display:block}.shell{position:relative;height:100dvh;min-height:100dvh}.side,.chat{position:absolute;inset:0;height:100dvh}.side{z-index:2;border-right:0}.chat{z-index:4;transform:translateX(100%);transition:transform .22s ease}.shell.chatting .chat{transform:translateX(0)}
.authScreen{padding:calc(44px + env(safe-area-inset-top)) 20px 24px}.authCard{padding:18px}.appHome{padding-top:env(safe-area-inset-top)}.mobileHeader{top:env(safe-area-inset-top);height:76px;padding:13px 16px 9px}.appView{padding:12px 14px 20px}.bottomNav{height:calc(64px + env(safe-area-inset-bottom))}.navItem{height:63px}
.top{min-height:68px;padding:8px 10px;padding-top:max(8px,env(safe-area-inset-top))}.top>#back{display:grid}.top>.avatar{width:39px;height:39px;flex-basis:39px}.callActions{gap:3px}.callActions .roundBtn{width:35px;height:35px}.peerBlock .status{display:none}.messages{padding:14px 10px}.msg{max-width:84%;font-size:14px}.composer{padding:8px 10px calc(8px + env(safe-area-inset-bottom))}.composer #text{height:42px}.videos{inset:68px 0 59px}
}