:root{--bg:#f7f7fa;--card:rgba(255,255,255,.62);--text:#101014;--muted:#707079;--line:rgba(20,20,30,.1);--purple:#7c4dff;--purple2:#a56bff;--shadow:0 18px 55px rgba(40,20,80,.12)}
*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;color:var(--text);background:radial-gradient(circle at 20% 0%,#fff 0,#f5f2ff 35%,var(--bg) 70%);min-height:100vh}
button,input{font:inherit}button{border:0;cursor:pointer}.app{max-width:560px;margin:auto;min-height:100vh;padding-bottom:90px}
.glass{background:var(--card);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.7);box-shadow:var(--shadow)}
.top{position:sticky;top:12px;z-index:5;margin:12px;padding:14px 18px;border-radius:24px;display:flex;justify-content:space-between;align-items:center}
.logo{font-size:25px;font-weight:800;letter-spacing:-1px}.plus{color:var(--purple)}.icon{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.7)}
main{padding:8px 14px}.screen{display:none}.screen.active{display:block}.title{font-size:31px;letter-spacing:-1.5px;margin:16px 4px 5px}.sub{color:var(--muted);margin:0 4px 18px}
.card{border-radius:28px;padding:18px;margin:12px 0}.moment{overflow:hidden;padding:0}.moment img,.preview{width:100%;display:block;aspect-ratio:1/1;object-fit:cover;background:#e9e7ef}.momentbody{padding:16px}.row{display:flex;align-items:center;gap:10px}.between{justify-content:space-between}.avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;background:linear-gradient(135deg,#ddd,#fff)}.pill{border-radius:999px;padding:10px 16px;background:rgba(124,77,255,.12);color:var(--purple);font-weight:700}.btn{width:100%;padding:14px 18px;border-radius:18px;background:var(--text);color:white;font-weight:750}.btn.purple{background:linear-gradient(135deg,var(--purple),var(--purple2))}.input{width:100%;padding:14px 16px;border-radius:17px;border:1px solid var(--line);background:rgba(255,255,255,.72);outline:none;margin:6px 0}.nav{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);width:min(535px,calc(100% - 24px));padding:10px;border-radius:27px;display:flex;justify-content:space-around;z-index:10}.nav button{background:transparent;padding:10px;border-radius:18px;color:var(--muted);font-size:12px}.nav button.active{background:rgba(124,77,255,.12);color:var(--purple)}.nav b{display:block;font-size:20px}.camera{min-height:62vh;border-radius:32px;display:flex;flex-direction:column;justify-content:flex-end;padding:20px;background:linear-gradient(160deg,#17151c,#4c405d);color:white;position:relative;overflow:hidden}.camera:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 20%,rgba(165,107,255,.45),transparent 35%)}.camera>*{position:relative}.shutter{width:76px;height:76px;border-radius:50%;border:5px solid white;background:rgba(255,255,255,.25);margin:20px auto 8px}.stat{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stat div{padding:16px;border-radius:20px;text-align:center}.stat strong{font-size:22px;display:block}.chat{display:flex;gap:12px;align-items:center;padding:14px;border-bottom:1px solid var(--line)}.badge{font-size:11px;color:var(--purple);font-weight:800}.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);padding:12px 18px;border-radius:18px;z-index:50}.hidden{display:none!important}.login{min-height:100vh;display:flex;align-items:center;padding:25px}.loginbox{width:100%;padding:26px;border-radius:32px}.small{font-size:13px;color:var(--muted)}
.dark{--bg:#08080b;--card:rgba(28,28,34,.68);--text:#f6f6fa;--muted:#aaaab4;--line:rgba(255,255,255,.1);background:#08080b}.dark .input{background:rgba(30,30,36,.8);color:white}.dark .glass{border-color:rgba(255,255,255,.08)}
@media(min-width:700px){body{padding:10px}.app{border-left:1px solid var(--line);border-right:1px solid var(--line)}}

body{padding-bottom:10px}.searchbar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:20px;margin:12px 0 24px}.searchbar input{border:0;background:transparent;outline:0;width:100%;color:inherit}.person{display:flex;align-items:center;justify-content:space-between}.publicTile{min-height:170px;margin:12px 0;border-radius:22px;background:linear-gradient(135deg,#eee8ff,#fff);display:grid;place-items:center;text-align:center;font-size:40px}.publicTile span{font-size:14px;color:#666}.camera{padding:0;min-height:62vh;background:#111}.camera video{width:100%;height:100%;min-height:62vh;object-fit:cover}.cameraControls{position:absolute;bottom:18px;left:0;right:0;display:flex;align-items:center;justify-content:space-around}.setting{display:flex;justify-content:space-between;padding:14px 0;border-top:1px solid var(--line)}.center{text-align:center}.big{width:72px;height:72px}.stat div{background:rgba(255,255,255,.35);border-radius:20px;padding:14px;text-align:center}.stat span{display:block;color:var(--muted);font-size:12px}

button{color:inherit}.brandBtn{background:transparent;padding:0}.topActions{display:flex;gap:8px}.topActions .icon{position:relative}.topActions i{position:absolute;width:8px;height:8px;border-radius:50%;background:#7c4dff;right:5px;top:5px}.authTabs{display:flex;gap:8px;margin:15px 0}.selected{background:rgba(124,77,255,.18)!important;color:#7c4dff!important}.linkBtn{background:transparent;color:#7c4dff;padding:15px;width:100%}.upload{display:block;text-align:center;margin:8px 0}.profileCard .avatar{display:block}.comments{margin-top:10px;display:grid;gap:7px}.comments>div{padding:8px 10px;border-radius:12px;background:rgba(124,77,255,.07);font-size:13px}.wrap{flex-wrap:wrap}.camera{min-height:66vh;padding:0;background:#111;position:relative}.camera video{width:100%;height:66vh;object-fit:cover;border-radius:28px}.cameraOverlay{position:absolute;top:15px;left:15px;padding:8px 12px;border-radius:15px;background:rgba(0,0,0,.35);color:#fff}.cameraControls{position:absolute;bottom:16px;left:0;right:0;display:flex;align-items:center;justify-content:space-around}.shutter{width:78px;height:78px;border-radius:50%;border:5px solid white;background:rgba(255,255,255,.3)}.callScreen{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 20%,#37294e,#09090d)}.callCard{width:min(520px,100%);padding:30px;border-radius:35px;text-align:center;color:white}.callAvatar{width:130px;height:130px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);font-size:55px;margin:30px auto}.centerRow{justify-content:center;flex-wrap:wrap}.danger{background:rgba(255,70,80,.18);color:#ff6b73}.chatMessages{padding:20px;display:grid;gap:10px}.bubble{max-width:78%;padding:12px 15px;border-radius:20px 20px 20px 6px;background:rgba(124,77,255,.1)}.bubble.mine{justify-self:end;border-radius:20px 20px 6px 20px;background:#7c4dff;color:white}.composer{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);width:min(540px,calc(100% - 24px));padding:8px;display:flex;gap:6px;border-radius:25px;z-index:15}.composer .input{margin:0}.notification{padding:13px;border-bottom:1px solid var(--line)}

.nav{left:50%;transform:translateX(-50%);width:min(760px,calc(100% - 24px));display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:8px;bottom:12px;border-radius:32px;align-items:center}.navItem{min-width:0;border:0;background:transparent;padding:9px 5px;border-radius:24px;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--muted);font-size:11px;transition:.2s}.navItem .navIcon{width:29px;height:29px;display:grid;place-items:center}.navIcon svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.navItem.active{color:#6f43e8;background:rgba(255,255,255,.62);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 18px rgba(100,80,160,.12)}.dark .navItem.active{background:rgba(255,255,255,.12)}
.profileHead{display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center}.avatarWrap{position:relative;width:78px;height:78px}.avatar.big{width:78px;height:78px;object-fit:cover;border-radius:50%;background:linear-gradient(135deg,#ece7ff,#fff);border:2px solid rgba(255,255,255,.9)}.avatarCam{position:absolute;right:-3px;bottom:-3px;width:30px;height:30px;border-radius:50%;border:2px solid white;background:rgba(255,255,255,.88);color:#6f43e8;padding:6px;box-shadow:0 4px 14px rgba(0,0,0,.14)}.avatarCam svg,.miniAction svg,.settingsBtn svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.miniAction,.settingsBtn{border:0;background:rgba(255,255,255,.5);backdrop-filter:blur(18px);border-radius:18px;padding:10px;color:#6f43e8;display:flex;align-items:center;gap:6px}.miniAction svg,.settingsBtn svg{width:19px;height:19px}.settingsBtn{width:42px;height:42px;justify-content:center;padding:9px}.subHeader{display:flex;align-items:center;gap:10px;margin-bottom:10px}.subHeader .title{margin:0}.settingsList{overflow:hidden}.settingsList button{width:100%;display:grid;grid-template-columns:32px 1fr 20px;align-items:center;gap:12px;padding:17px;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left;color:inherit}.settingsList button:last-child{border-bottom:0}.settingsList svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:#6f43e8}.settingsList small{display:block;color:var(--muted);margin-top:3px}.appearanceGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.appearanceOption{border:1px solid var(--line);background:rgba(255,255,255,.45);border-radius:20px;padding:18px 8px;display:grid;gap:7px;place-items:center;color:inherit}.appearanceOption.selected{border-color:#8b6af0;background:rgba(124,77,255,.1);color:#6f43e8}.sectionTitle{margin:25px 0 10px}.profileIdentity{min-width:0}
@media(max-width:520px){.profileHead{grid-template-columns:auto 1fr auto}.miniAction span{display:none}.avatarWrap{grid-row:1 / span 2}.nav{bottom:10px}.navItem{font-size:10px}}

.sectionHeader{display:flex;align-items:center;justify-content:space-between;gap:10px}.sectionHeader .sectionTitle{margin:25px 0 10px}.capturePill{display:flex;align-items:center;gap:6px;padding:9px 13px}.capturePill svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.photoChooser{position:fixed;inset:0;background:rgba(10,8,18,.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:60;display:flex;align-items:flex-end;justify-content:center;padding:14px}.photoSheet{width:min(540px,100%);padding:18px;border-radius:30px 30px 24px 24px}.photoSheet h3{margin:4px 0}.photoSheet .btn{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:9px}.photoSheet .btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.dark .photoChooser{background:rgba(0,0,0,.48)}

.callHub{display:flex;align-items:center;justify-content:space-between;gap:15px}

.cameraWrap{min-height:calc(100vh - 40px);display:flex;flex-direction:column;gap:12px}
.cameraTop{padding:8px 2px}.cameraMode{font-size:12px;font-weight:800;letter-spacing:.12em}
.cameraView{position:relative;overflow:hidden;border-radius:30px;min-height:58vh;background:#111;box-shadow:0 18px 60px rgba(0,0,0,.22)}
.cameraView video{width:100%;height:100%;min-height:58vh;object-fit:cover;display:block;transition:filter .25s,transform .25s}
.cameraFilterOverlay{position:absolute;inset:0;pointer-events:none;transition:filter .25s}
.cameraEmojiOverlay{position:absolute;z-index:3;inset:0;display:flex;align-items:center;justify-content:center;font-size:92px;pointer-events:none;text-shadow:0 8px 30px rgba(0,0,0,.3)}
.cameraTimer{position:absolute;z-index:4;inset:0;display:flex;align-items:center;justify-content:center;font-size:100px;font-weight:900;color:#fff;text-shadow:0 4px 24px #000}
.cameraTools{padding:8px 0}.cameraToolRow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cameraControl,.tool{border:0;background:rgba(255,255,255,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:18px;padding:10px 12px;font-size:22px}
.tool{display:flex;flex-direction:column;align-items:center;min-width:54px}.tool small{font-size:10px;margin-top:3px}.shutter{width:68px;height:68px;border-radius:50%;border:5px solid rgba(255,255,255,.85);background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.18);font-size:0}
.shutter:after{content:"";display:block;width:50px;height:50px;border-radius:50%;background:#111;margin:auto}
.cameraHint{text-align:center;font-size:12px;opacity:.62}
.dark .cameraControl,.dark .tool{background:rgba(30,30,36,.72);color:#fff}.dark .shutter{background:#fff}

.connectionStatus{display:flex;align-items:center;gap:8px;margin:8px 0 14px;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.55);backdrop-filter:blur(14px);font-size:12px;font-weight:700}
.statusDot{width:8px;height:8px;border-radius:50%;display:inline-block}.statusDot.online{background:#42c56b}.statusDot.offline{background:#e45555}
.dark .connectionStatus{background:rgba(30,30,36,.65)}

.cameraEnableBtn{width:100%;margin-top:2px}
.cameraView video{background:#111;-webkit-user-select:none;user-select:none}