:root{--bg:#000;--ink:#E7E9EA;--mute:#71767B;--line:#2F3336;--acc:#00BA7C;--onacc:#03130C;--err:#F4212E;--glass:rgba(8,9,11,.82);box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}
html,body{height:100%;margin:0}
body{color:var(--ink);background:var(--bg);font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
#app{height:100%;max-width:520px;margin:0 auto;display:flex;flex-direction:column}
header{display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;background:var(--glass);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border-bottom:1px solid var(--line)}
.logo{font-weight:800;font-size:20px;letter-spacing:-.02em}
#tag{margin-left:auto;color:var(--mute);font-size:14px}
.seg{margin-left:auto;display:flex;border:1px solid var(--line);border-radius:999px;padding:2px}
.seg button{border:0;background:none;padding:5px 12px;border-radius:999px;font-size:13px;font-weight:600;color:var(--mute)}
.seg button[aria-pressed="true"]{background:var(--line);color:var(--ink)}
#main{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
button,a.btn{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,textarea:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.btn{display:inline-block;text-align:center;text-decoration:none;background:var(--acc);color:var(--onacc);border:0;border-radius:999px;padding:9px 20px;font-weight:700;font-size:14px}
.btn:disabled{opacity:.4;cursor:default}
.btn.ghost{background:none;color:var(--ink);border:1px solid var(--line)}
.btn.sm{padding:6px 14px;align-self:flex-start}
.post{border-bottom:1px solid var(--line);padding:12px 16px;display:flex;gap:12px}
.composer{border-bottom:8px solid var(--line);padding:14px 16px;display:flex;gap:12px}
.av{width:40px;height:40px;border-radius:50%;flex:none;object-fit:cover;background:var(--line)}
.av.lg{width:72px;height:72px}
.grow{flex:1;min-width:0}
textarea{width:100%;background:transparent;border:0;color:var(--ink);font:inherit;font-size:18px;resize:none;height:60px;padding:0}
textarea::placeholder{color:var(--mute)}textarea:focus{outline:0}
.bar{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:6px;color:var(--mute);font-size:13px}
.who{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}.who b{font-weight:700}.who span{color:var(--mute);font-size:14px}
.txt{margin:2px 0 6px;word-wrap:break-word;overflow-wrap:anywhere}.txt p{margin:0 0 8px}.txt a{color:var(--acc);text-decoration:none}
.media{width:100%;max-height:360px;object-fit:cover;border-radius:14px;margin:4px 0 6px;border:1px solid var(--line)}
.rbn{color:var(--mute);font-size:13px;margin-bottom:2px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.ib{display:flex;align-items:center;gap:6px;border:0;background:none;color:var(--mute);font-size:13px;padding:6px;border-radius:999px}
.ib svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8}
.ib.like:hover,.ib.like.on{color:#F91880}.ib.like.on svg{fill:#F91880;stroke:#F91880}
.ib.rp:hover,.ib.rp.on{color:var(--acc)}
.empty{padding:48px 24px;text-align:center;color:var(--mute)}.empty b{display:block;color:var(--ink);font-size:18px;margin-bottom:4px}
.banner{background:#2a0d10;color:#ffb3b8;padding:10px 16px;font-size:14px}
.more{display:block;margin:16px auto}
nav{display:flex;gap:4px;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));background:var(--glass);border-top:1px solid var(--line);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%)}
nav button{flex:1;border:0;background:none;padding:8px 0;border-radius:999px;display:flex;justify-content:center}
nav svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8}
nav button[aria-current="true"] svg{fill:var(--ink)}
.auth{max-width:380px;margin:0 auto;padding:calc(72px + env(safe-area-inset-top,0px)) 24px 24px;display:flex;flex-direction:column;gap:12px}
.auth h1{font-size:40px;letter-spacing:-.03em;margin:0}.auth p{color:var(--mute);margin:0 0 12px}
.auth .btn{padding:13px}.err{color:var(--err);font-size:14px;min-height:20px}
.prof{display:flex;gap:16px;align-items:center;padding:20px 16px;border-bottom:1px solid var(--line)}
.prof b{font-size:20px;display:block}.prof span,.cnt{color:var(--mute);font-size:14px}
.srch{display:flex;gap:8px;padding:12px 16px}
.srch input{flex:1;min-width:0;background:transparent;border:1px solid var(--line);border-radius:999px;padding:10px 16px;color:var(--ink);font:inherit}
.atts{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.att{position:relative;width:calc(50% - 4px);border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#0b0b0b}
.att img,.att video{width:100%;height:110px;object-fit:cover;display:block}
.att .x{position:absolute;top:6px;right:6px;width:32px;height:32px;border-radius:50%;border:0;background:rgba(0,0,0,.7);color:#fff;font-size:20px;line-height:1}
.att .ov{position:absolute;top:0;left:0;right:0;height:110px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);font-size:13px;text-align:center;padding:6px}
.ov.bad{color:#ffb3b8}
.alt{width:100%;background:transparent;border:0;border-top:1px solid var(--line);padding:8px;color:var(--ink);font:inherit;font-size:13px}
.cwl{margin:4px 0 8px;color:var(--mute)}
audio.media{border:0}

.lnk{background:none;border:0;padding:0;color:inherit;font:inherit;text-align:left;cursor:pointer;display:inline-flex;flex:none}
.who .lnk{flex:0 1 auto}.lnk b:hover{text-decoration:underline}
.composer.reply{border-bottom:1px solid var(--line)}
.bio{padding:0 16px 12px}.mute{color:var(--mute)}
.ib.back{font-size:20px;padding:4px 8px}
.ib.bm.on{color:var(--acc)}.ib.bm.on svg{fill:var(--acc)}
.acts{display:flex;flex-direction:column;gap:8px}.acts .btn{align-self:stretch}
.ptabs{display:flex;border-bottom:1px solid var(--line)}
.ptabs button{flex:1;padding:12px;background:none;border:0;color:var(--mute);font:inherit;font-weight:600;cursor:pointer}
.ptabs button[aria-pressed="true"]{color:var(--ink);box-shadow:inset 0 -3px 0 var(--acc)}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 12px}
.chip{background:none;border:1px solid var(--line);color:var(--acc);border-radius:999px;padding:6px 12px;font:inherit;font-size:14px;cursor:pointer}
.edit{padding:16px}.edit label{display:block;color:var(--mute);font-size:13px;margin:14px 0 6px}
.edit input:not([type=file]),.edit textarea{width:100%;background:transparent;border:1px solid var(--line);border-radius:10px;padding:12px;color:var(--ink);font:inherit;font-size:16px}
.edit textarea{height:120px}
.cwin{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);padding:6px 0 8px;color:var(--ink);font:inherit;margin-bottom:6px}
select{background:transparent;color:var(--mute);border:1px solid var(--line);border-radius:999px;padding:5px 8px;font:inherit;font-size:13px}
.bar .ib:first-child{margin-right:auto}
.cwb[aria-pressed="true"]{color:var(--acc)}
.txt a[data-act]{cursor:pointer}