:root{--bg:#fff;--fg:#111;--mute:#8a8a8f;--line:#ececee;--soft:#f6f6f7;--acc:#111;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#111;--fg:#f4f4f4;--mute:#92929a;--line:#262626;--soft:#1b1b1b}}
:root[data-theme="dark"]{--bg:#111;--fg:#f4f4f4;--mute:#92929a;--line:#262626;--soft:#1b1b1b}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
body{background:var(--bg);color:var(--fg);font:15px/1.45 -apple-system,"Helvetica Neue",Arial,sans-serif;max-width:480px;margin:0 auto;min-height:100vh}
.hide{display:none!important}
.logo{font-weight:800;letter-spacing:.3em}
.wrap{padding:44px 24px}
.wrap h1{font-size:30px;text-align:center;padding-left:.3em}
.sub{color:var(--mute);text-align:center;margin:6px 0 26px;font-size:14px}
label{display:block;font-size:12px;color:var(--mute);margin:12px 0 5px}
input,textarea{width:100%;border:1px solid var(--line);background:var(--soft);color:var(--fg);border-radius:12px;padding:12px 14px;font:inherit;outline:none;resize:none}
.btn{width:100%;border:0;background:var(--acc);color:#fff;border-radius:12px;padding:13px;font:600 15px inherit;font-family:inherit;margin-top:20px;cursor:pointer}
.btn.ghost{background:var(--soft);color:var(--fg);margin-top:10px}
.err{color:#e5343d;font-size:13px;margin-top:10px;text-align:center;min-height:18px}
.bias{display:flex;gap:10px}
.bias button{flex:1;border:2px solid var(--line);background:var(--bg);color:var(--fg);border-radius:14px;padding:14px 4px;font:600 13px inherit;font-family:inherit;cursor:pointer}
.bias button.on{border-color:var(--c)}
header{position:sticky;top:env(safe-area-inset-top,0px);background:var(--bg);z-index:5;padding:14px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
main{padding-bottom:80px}
nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;display:flex;background:var(--bg);border-top:1px solid var(--line);padding:6px 0 calc(6px + env(safe-area-inset-bottom,0px));z-index:6}
nav button{flex:1;border:0;background:none;color:var(--mute);font:600 11px inherit;font-family:inherit;padding:6px 0;cursor:pointer}
nav button b{display:block;font-size:19px;font-weight:400}
nav button.on{color:var(--fg)}
.av{border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;flex:none}
.stories{display:flex;gap:14px;overflow-x:auto;padding:14px 18px;border-bottom:1px solid var(--line)}
.st{text-align:center;font-size:11px;color:var(--mute);cursor:pointer;flex:none;width:58px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st .av{width:54px;height:54px;font-size:18px;margin:0 auto 4px;outline:2px solid var(--c,var(--line));outline-offset:2px}
.box{padding:14px 18px;display:flex;gap:8px;border-bottom:1px solid var(--line)}
.box button{border:0;background:var(--acc);color:#fff;border-radius:12px;padding:0 16px;font:600 14px inherit;font-family:inherit;cursor:pointer}
.post{padding:14px 18px;border-bottom:1px solid var(--line)}
.who{display:flex;gap:10px;align-items:center;margin-bottom:6px}
.who .av{width:36px;height:36px;font-size:14px}
.nm{font-weight:600;font-size:14px}.tm{color:var(--mute);font-size:12px}
.txt{white-space:pre-wrap;word-break:break-word}
.like{border:0;background:none;color:var(--mute);font:inherit;font-size:13px;padding:6px 0 0;cursor:pointer}.like.on{color:var(--c);font-weight:600}
.empty{color:var(--mute);text-align:center;padding:34px 18px;font-size:14px}
.msgs{padding:14px 18px 130px;display:flex;flex-direction:column;gap:10px}
.m{max-width:80%}.m .nm{font-size:11px;color:var(--mute);font-weight:500;margin:0 4px 2px}
.b{background:var(--soft);padding:9px 13px;border-radius:16px 16px 16px 4px;word-break:break-word;white-space:pre-wrap}
.m.me{align-self:flex-end}.m.me .nm{text-align:right}.m.me .b{background:var(--c);color:#fff;border-radius:16px 16px 4px 16px}
.cbar{position:fixed;bottom:calc(56px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);width:100%;max-width:480px;background:var(--bg);padding:10px 18px;display:flex;gap:8px;border-top:1px solid var(--line);z-index:5}
.cbar button{border:0;background:var(--acc);color:#fff;border-radius:12px;padding:0 16px;font:600 14px inherit;font-family:inherit;cursor:pointer}
.card{margin:14px 18px;padding:18px;border:1px solid var(--line);border-radius:18px}
.mem{display:flex;gap:14px;align-items:center}
.live{display:inline-block;background:#e5343d;color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;margin-bottom:8px}
.prof{text-align:center;padding:30px 24px 10px}.prof .av{width:84px;height:84px;font-size:32px;margin:0 auto 12px}
#sv{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:30px;color:#fff;text-align:center;font-size:24px;font-weight:600;cursor:pointer;text-shadow:0 1px 6px #0008}
#sv small{position:absolute;top:calc(20px + env(safe-area-inset-top,0px));left:20px;font-size:14px;font-weight:500}
.ib,.box .ib{border:0;background:var(--soft);color:var(--fg);border-radius:10px;padding:8px 12px;font:600 13px inherit;font-family:inherit;cursor:pointer;margin:2px}
.pim{width:100%;border-radius:14px;margin-top:8px;display:block}.thumb{width:90px;height:90px;object-fit:cover;border-radius:12px;margin:6px 0}
.lvv{width:calc(100% - 36px);margin:0 18px;border-radius:16px;background:#000;min-height:120px;display:block}
.mp{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 20%;outline:3px solid #ddd;outline-offset:2px;flex:none}
#sh{position:fixed;inset:0;background:#0007;z-index:15;display:flex;align-items:flex-end}
.sheet{background:var(--bg);width:100%;max-width:480px;margin:0 auto;border-radius:20px 20px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom,0px))}.sheet b{display:block;margin-bottom:10px}
.sb{width:100%;border:1px solid var(--line);background:var(--bg);color:var(--fg);border-radius:12px;padding:13px;font:600 15px inherit;font-family:inherit;margin-bottom:10px;cursor:pointer}.or{text-align:center;color:var(--mute);font-size:12px;margin:18px 0 10px}.row2{display:flex;gap:10px}.lnk{border:0;background:none;color:var(--mute);font:inherit;font-size:13px;margin-top:10px;cursor:pointer;width:100%}