:root{--reel-action:#fff;--surface-dark:#090d10}
body{min-height:100dvh;min-height:100svh}
.topbar{position:sticky;top:0}
.server-offline-notice{margin:14px 0;padding:13px 14px;border:1px solid #ffbb7d55;border-radius:16px;background:#ff9a2414;color:var(--text)}
.server-offline-notice strong{display:flex;gap:8px;align-items:center}.server-offline-notice i{width:8px;height:8px;border-radius:50%;background:#ffad65;box-shadow:0 0 12px #ffad65}
.server-offline-notice p{margin:5px 0 10px;color:var(--muted);font-size:12px}
.offline-banner{position:fixed;z-index:110;top:max(10px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);padding:9px 15px;border:1px solid #ffbb7d55;border-radius:999px;background:#211a1bf2;color:#ffe2c8;font-size:12px;box-shadow:0 8px 25px #0006;white-space:nowrap}
.theme-ocean{--bg:#08151d;--panel:rgba(14,43,59,.78);--panel2:#0a2636aa;--pink:#64c5e8;--violet:#5588e6;--cyan:#8ce8dc}.theme-sunset{--bg:#1a1017;--panel:rgba(63,29,43,.76);--panel2:#542737aa;--pink:#ff936f;--violet:#bd72cf;--cyan:#ffce75}.theme-forest{--bg:#0b1712;--panel:rgba(24,54,41,.78);--panel2:#173c2daa;--pink:#85d4a4;--violet:#6bb89d;--cyan:#c2df83}
.topbar .brand{position:absolute;left:50%;transform:translateX(-50%);font-size:19px}.topbar .top-search{margin-left:0;margin-right:auto;visibility:hidden}.topbar .top-actions{margin-left:auto}
.topbar .brand-mark{display:none}.topbar .brand-word{font-weight:750}.topbar .brand-word span{color:var(--pink)}
.bottom-nav{padding:7px 12px calc(8px + env(safe-area-inset-bottom));border:1px solid #ffffff25;border-bottom:0;border-radius:24px 24px 0 0;background:color-mix(in srgb,var(--bg) 82%,transparent);box-shadow:0 -9px 35px #0003;backdrop-filter:blur(28px) saturate(155%);-webkit-backdrop-filter:blur(28px) saturate(155%)}
.bottom-nav button{display:grid;place-items:center;width:48px;height:44px;border-radius:16px;font-size:23px;color:var(--text);transition:transform .2s,background .2s}.bottom-nav button.active{background:#ffffff1c;transform:scale(1.04)}
.stories.story-strip-modern{display:flex;gap:12px;padding:13px 10px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}.story-strip-modern::-webkit-scrollbar{display:none}.story-strip-modern .story-button{width:72px;min-width:72px;color:var(--text);font-size:11px}.story-strip-modern .story-ring{display:grid;place-items:center;flex:0 0 64px;width:64px;height:64px;padding:3px;box-sizing:border-box;border-radius:50%;background:conic-gradient(#ffb300,#ff3e71,#d514b5,#ffb300)}.story-strip-modern .story-ring.story-seen{background:#687078}.story-strip-modern .story-ring .avatar{display:block;width:100%;height:100%;min-width:0;min-height:0;border:2px solid var(--bg);border-radius:50%;object-fit:cover}.story-strip-modern .story-create .story-ring{position:relative}.story-strip-modern .story-create .story-ring>i{position:absolute;right:-2px;bottom:-2px;width:23px;height:23px;display:grid;place-items:center;border:2px solid var(--bg);border-radius:50%;background:#3985ff;color:white;font-style:normal;font-size:17px;line-height:1}
.feed-card{border-radius:0;box-shadow:none;border-inline:0;background:transparent;backdrop-filter:none}.feed-card-head{padding:10px 3px}.feed-card .post-media-wrap{max-height:none;aspect-ratio:4/5;background:#06080a}.feed-card .post-media{width:100%;height:100%;max-height:none;object-fit:cover}.feed-card .post-copy{padding:8px 4px 15px}.composer{display:none}.feed-card .post-tools .post-tool{font-size:23px}
.profile-hero{padding:17px;border-radius:20px}.profile-top{display:grid;grid-template-columns:90px 1fr;align-items:center;gap:15px}.profile-top .avatar.big{width:84px;height:84px;border:2px solid #ff68b0;padding:2px;background:linear-gradient(135deg,#ffb700,#e61780,#875cff)}.profile-top .grow h1{font-size:17px!important}.profile-top .stats{display:flex;justify-content:space-between;gap:8px;margin:14px 0 0}.profile-top .stat{text-align:center}.profile-top .stat strong{font-size:15px}.profile-top .stat span{font-size:11px}.profile-bio{font-size:13px;line-height:1.45}.profile-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.profile-actions>*{min-height:38px;padding:7px 8px;font-size:12px}.post-grid{gap:2px}.grid-tile{border-radius:0}.profile-hero+.section-head{margin-top:20px}
.reels-page{position:relative;height:calc(100dvh - 154px);min-height:420px;margin:-15px -14px -80px;overflow:hidden;background:#000}.reels-heading{position:absolute;z-index:3;top:calc(env(safe-area-inset-top) + 76px);left:20px;right:20px;display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:20px;text-shadow:0 2px 8px #0008}.reels-heading .icon-btn{background:#10111666}.reels-list{height:100%;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior-y:contain;scrollbar-width:none}.reels-list::-webkit-scrollbar{display:none}.reel-card{position:relative;height:100%;min-height:420px;scroll-snap-align:start;overflow:hidden;background:#0a0a0a}.reel-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#101114}.reel-shade{position:absolute;inset:35% 0 0;background:linear-gradient(transparent,#0009);pointer-events:none}.reel-caption{position:absolute;left:15px;right:82px;bottom:calc(82px + env(safe-area-inset-bottom));z-index:2;color:white;text-shadow:0 1px 8px #0009}.reel-caption p{font-size:13px;margin:8px 0 0}.reel-author{display:flex;align-items:center;gap:8px;border:0;background:none;color:white;padding:0}.reel-author .avatar{width:32px;height:32px;border-color:#fff9}.reel-author .soft-btn{padding:4px 10px;color:white;border-color:#fff8;background:#0003;font-size:11px}.reel-actions{position:absolute;right:13px;bottom:calc(94px + env(safe-area-inset-bottom));z-index:3;display:grid;gap:17px;text-align:center;color:white}.reel-actions button{display:grid;justify-items:center;gap:2px;border:0;background:transparent;color:white;text-shadow:0 1px 6px #000;font-size:25px}.reel-actions small{font-size:10px}
.settings-card{padding:18px;margin-bottom:13px;border-radius:20px}.settings-card h2{margin:0 0 4px;font-size:17px}.settings-card p{font-size:12px}.theme-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:14px}.theme-choice{display:grid;justify-items:center;gap:7px;padding:11px 5px;border:1px solid var(--line);border-radius:15px;background:var(--panel2);font-size:12px}.theme-choice.selected{border-color:var(--violet);box-shadow:0 0 0 2px color-mix(in srgb,var(--violet) 22%,transparent)}.swatch{width:34px;height:34px;border-radius:50%;background:linear-gradient(145deg,#171622,#080a0d);border:1px solid #fff4}.swatch-light{background:linear-gradient(145deg,#fff,#eee)}.swatch-ocean{background:linear-gradient(145deg,#2bd0d2,#163b73)}.swatch-sunset{background:linear-gradient(145deg,#ffb45f,#aa3b91)}.swatch-forest{background:linear-gradient(145deg,#c6dc69,#20614b)}.swatch-system{background:linear-gradient(90deg,#fff 50%,#15151c 50%)}.server-address{overflow-wrap:anywhere}.connection-state{display:block;margin-top:10px;font-size:12px}.connection-state.connected{color:#6be3a6}.connection-state.disconnected{color:#ffb36e}
@media(min-width:761px){.reels-page{height:calc(100dvh - 175px);margin:0;border-radius:22px}.reels-heading{top:10px;left:15px;right:15px}.reel-card{max-width:520px;margin:auto;border-radius:18px}.bottom-nav{display:none}}
@media(max-width:760px){html,body,#app{min-height:100dvh;min-height:100svh}.topbar{height:58px;padding-top:env(safe-area-inset-top);box-sizing:content-box}.topbar .brand{font-size:17px}.topbar .top-search{display:none}.top-actions .avatar{width:32px;height:32px}.layout{padding:8px 0 calc(82px + env(safe-area-inset-bottom))}.app{padding:0 0}.main{min-height:calc(100dvh - 138px)}.feed-card{margin:0 -10px 11px}.feed-card .post-media-wrap{aspect-ratio:4/5}.stories.story-strip-modern{border-radius:0;margin:0 -5px 7px;padding:10px 8px 12px}.bottom-nav{left:12px;right:12px;bottom:calc(7px + env(safe-area-inset-bottom));border:1px solid #ffffff28;border-radius:25px;padding:5px 6px;background:color-mix(in srgb,var(--bg) 76%,transparent)}.reels-page{height:calc(100dvh - 126px - env(safe-area-inset-bottom));margin:-8px 0 calc(-82px - env(safe-area-inset-bottom));}.reels-heading{top:calc(env(safe-area-inset-top) + 68px)}.reel-caption{bottom:calc(82px + env(safe-area-inset-bottom))}.reel-actions{bottom:calc(93px + env(safe-area-inset-bottom))}.profile-hero{margin:0 0 12px;padding:15px;border-radius:0;border-inline:0}.profile-top{grid-template-columns:82px 1fr}.profile-top .avatar.big{width:76px;height:76px}.post-grid{margin:0 -8px}.settings-card{margin-inline:2px}}
@media(max-width:380px){.bottom-nav button{width:43px;height:42px}.theme-choices{gap:5px}.theme-choice{font-size:11px}}
.story-viewer{background:#050607}.story-viewer .story-overlay{padding:calc(15px + env(safe-area-inset-top)) 15px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(#0009,transparent 19%,transparent 74%,#0008)}.story-viewer .story-user{font-size:13px}.story-viewer .story-caption{max-width:88%;font-size:15px}.story-viewer img,.story-viewer video{object-fit:cover}
.profile-hero,.profile-actions,.post-grid,.settings-card{animation:rise .28s both}
@media(max-width:760px){.story-viewer{position:fixed;inset:0;width:100vw;height:100dvh;height:100svh;max-height:none;border-radius:0;z-index:70}.story-viewer img,.story-viewer video{object-fit:cover}}