:root { --bg:#080b10; --surface:#0e131b; --surface2:#121923; --line:#202a37; --muted:#82909f; --text:#f2f7f5; --mint:#62f5c7; --mint2:#22c99a; --danger:#ff6b7d; color-scheme:dark; }
* { box-sizing:border-box; }
html { background:var(--bg); }
body { margin:0; min-height:100vh; color:var(--text); background:var(--bg); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input,textarea { font:inherit; }
button { color:inherit; }
.hidden { display:none !important; }
.ambient { position:fixed; inset:0; pointer-events:none; background:radial-gradient(circle at 12% 8%,rgba(98,245,199,.08),transparent 25rem),radial-gradient(circle at 91% 82%,rgba(87,116,255,.06),transparent 28rem); }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-size:21px; font-weight:700; letter-spacing:-.04em; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; border:1px solid rgba(98,245,199,.55); color:var(--mint); border-radius:10px; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; box-shadow:inset 0 0 16px rgba(98,245,199,.08),0 0 20px rgba(98,245,199,.06); }
.eyebrow,.form-kicker { margin:0 0 10px; color:var(--mint); font:700 11px/1 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.16em; }
.auth-shell { min-height:100vh; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(390px,.85fr); }
.auth-brand { padding:54px clamp(35px,7vw,110px); display:flex; flex-direction:column; justify-content:space-between; border-right:1px solid var(--line); }
.auth-brand h1 { margin:0; max-width:720px; font-size:clamp(48px,7vw,94px); line-height:.94; letter-spacing:-.07em; }
.lede { max-width:570px; color:#a7b2be; font-size:18px; line-height:1.65; }
.signal-note { color:var(--muted); font:11px ui-monospace,SFMono-Regular,Consolas,monospace; }
.signal-note span,.live-pill i { display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:var(--mint); box-shadow:0 0 10px var(--mint); }
.auth-card { align-self:center; width:min(440px,calc(100% - 48px)); margin:auto; padding:38px; border:1px solid var(--line); border-radius:22px; background:rgba(14,19,27,.88); backdrop-filter:blur(20px); box-shadow:0 30px 90px rgba(0,0,0,.3); }
.auth-tabs { display:flex; gap:6px; padding:5px; margin-bottom:38px; border-radius:12px; background:#090d12; }
.tab { flex:1; padding:10px; border:0; border-radius:8px; background:transparent; color:var(--muted); cursor:pointer; }
.tab.active { color:var(--text); background:var(--surface2); }
.stack { display:grid; gap:20px; }
.stack h2 { margin:0; font-size:29px; letter-spacing:-.04em; }
label { display:grid; gap:8px; color:#bdc7cf; font-size:13px; font-weight:600; }
input,textarea { width:100%; border:1px solid var(--line); border-radius:11px; outline:0; color:var(--text); background:#090d13; padding:13px 14px; resize:none; transition:.2s; }
input:focus,textarea:focus { border-color:rgba(98,245,199,.65); box-shadow:0 0 0 3px rgba(98,245,199,.08); }
.primary,.secondary { display:flex; align-items:center; justify-content:space-between; gap:15px; border:0; border-radius:11px; padding:13px 16px; font-weight:700; cursor:pointer; transition:.2s; }
.primary { color:#06100d; background:var(--mint); }
.primary:hover { background:#8ffadc; transform:translateY(-1px); }
.primary:disabled { opacity:.45; cursor:wait; }
.secondary { justify-content:center; border:1px solid var(--line); background:var(--surface2); }
.form-error { min-height:16px; margin:0; color:var(--danger); font-size:13px; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:250px minmax(430px,650px) minmax(260px,340px); justify-content:center; }
.sidebar { position:sticky; top:0; height:100vh; padding:28px 25px 22px; border-right:1px solid var(--line); display:flex; flex-direction:column; }
.side-brand { margin:0 12px 38px; }
nav { display:grid; gap:8px; }
.nav-item { display:flex; align-items:center; gap:15px; width:100%; padding:13px; border:0; border-radius:11px; background:transparent; color:#9ca8b4; font-weight:600; text-align:left; cursor:pointer; }
.nav-item.active,.nav-item:hover { color:var(--text); background:var(--surface); }
.icon { width:22px; color:var(--mint); font-size:22px; text-align:center; }
.compose-trigger { margin:24px 0; }
.side-user { margin-top:auto; display:grid; grid-template-columns:40px 1fr auto; gap:10px; align-items:center; padding-top:20px; border-top:1px solid var(--line); }
.side-user strong,.side-user small { display:block; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side-user small { color:var(--muted); }
.quiet-button { border:0; background:transparent; color:var(--muted); cursor:pointer; }
.avatar { flex:none; width:42px; height:42px; display:grid; place-items:center; border-radius:50%; color:#06100d; font-weight:800; text-transform:uppercase; }
.avatar.small { width:34px; height:34px; border:0; }
.timeline { min-height:100vh; border-right:1px solid var(--line); }
.mobile-header { display:none; }
.feed-head { height:112px; display:flex; align-items:end; justify-content:space-between; padding:25px 28px; border-bottom:1px solid var(--line); }
.feed-head h1 { margin:0; font-size:27px; letter-spacing:-.04em; }
.live-pill { padding:7px 9px; border:1px solid #26372f; border-radius:999px; color:#a9b9b3; font:10px ui-monospace,SFMono-Regular,Consolas,monospace; }
.live-pill i { width:5px; height:5px; margin-right:4px; }
.composer { display:grid; grid-template-columns:42px 1fr; gap:14px; padding:22px 25px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,rgba(18,25,35,.35),transparent); }
.composer textarea { min-height:75px; padding:4px 0; border:0; background:transparent; font-size:17px; line-height:1.5; box-shadow:none; }
.composer-actions { display:flex; align-items:center; gap:13px; padding-top:13px; border-top:1px solid var(--line); }
.media-button { display:block; color:var(--mint); font-size:23px; cursor:pointer; }
.media-button input { display:none; }
.char-count { margin-left:auto; color:var(--muted); font:11px ui-monospace,SFMono-Regular,Consolas,monospace; }
.compact { padding:9px 18px; border-radius:9px; }
.image-preview { position:relative; height:180px; margin:10px 0; border-radius:14px; background-size:cover; background-position:center; }
.image-preview::after { content:'Click to remove'; position:absolute; right:8px; top:8px; padding:5px 8px; border-radius:7px; color:white; background:rgba(0,0,0,.7); font-size:11px; }
.post { display:grid; grid-template-columns:42px 1fr; gap:14px; padding:22px 25px; border-bottom:1px solid var(--line); transition:.2s; }
.post:hover { background:rgba(18,25,35,.34); }
.post-content { min-width:0; }
.post header { display:flex; align-items:center; gap:6px; min-width:0; font-size:14px; }
.post-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.post-handle,.post time,.dot { color:var(--muted); }
.post-menu { display:none; margin-left:auto; border:0; background:none; color:var(--muted); cursor:pointer; }
.post.own .post-menu,.post.admin-view .post-menu { display:block; }
.post-body { margin:7px 0 12px; color:#dce3e5; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.post-image { display:block; width:100%; max-height:460px; object-fit:cover; margin:12px 0; border:1px solid var(--line); border-radius:16px; }
.post footer { display:flex; gap:clamp(34px,10vw,90px); margin-top:16px; }
.post footer button { display:flex; gap:7px; border:0; background:transparent; color:#778693; cursor:pointer; }
.post footer b { font-size:12px; font-weight:500; }
.post footer button:hover,.like-action.liked { color:var(--mint); }
.like-action.liked span { font-size:0; }
.like-action.liked span::after { content:'♥'; font-size:16px; }
.replies { margin-top:17px; border-left:1px solid #2c3a45; }
.replies .post { padding:14px 0 14px 16px; border-bottom:0; grid-template-columns:34px 1fr; }
.replies .avatar { width:34px; height:34px; font-size:12px; }
.load-more { display:block; width:calc(100% - 50px); margin:20px 25px; padding:11px; border:1px solid var(--line); border-radius:10px; background:var(--surface); cursor:pointer; }
.empty { padding:80px 30px; color:var(--muted); text-align:center; }
.empty strong { display:block; margin-bottom:8px; color:var(--text); font-size:22px; }
.rightbar { position:sticky; top:0; height:100vh; padding:28px 25px; }
.panel { margin-bottom:18px; padding:22px; border:1px solid var(--line); border-radius:16px; background:rgba(14,19,27,.65); }
.panel h2 { margin:0 0 13px; font-size:21px; line-height:1.25; letter-spacing:-.035em; }
.panel h3 { margin:0; }
.panel p { color:var(--muted); font-size:13px; line-height:1.55; }
.panel-title { display:flex; justify-content:space-between; align-items:center; }
.panel-title span { color:var(--mint); font:9px ui-monospace,SFMono-Regular,Consolas,monospace; }
.invite-result { display:grid; grid-template-columns:1fr auto; margin-top:12px; padding:10px; border:1px solid #2b433a; border-radius:9px; background:#09120f; }
.invite-result code { color:var(--mint); }
.invite-result button { border:0; background:transparent; cursor:pointer; }
.right-footer { position:absolute; bottom:25px; color:#56626e; font:10px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace; }
dialog { width:min(520px,calc(100% - 28px)); padding:0; border:1px solid var(--line); border-radius:18px; color:var(--text); background:var(--surface); box-shadow:0 25px 80px rgba(0,0,0,.65); }
dialog::backdrop { background:rgba(0,0,0,.67); backdrop-filter:blur(5px); }
.dialog-head { display:flex; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line); }
.dialog-head button { border:0; background:transparent; color:var(--muted); font-size:24px; }
#replyContext { padding:15px 20px 0; }
.reply-form,.modal-form { padding:20px; }
.reply-form > div { display:flex; align-items:center; margin-top:12px; }
.toast { position:fixed; z-index:10; left:50%; bottom:25px; padding:11px 17px; border:1px solid #315b4c; border-radius:10px; opacity:0; pointer-events:none; color:var(--text); background:#0e211a; transform:translate(-50%,15px); transition:.2s; }
.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:1050px) { .app-shell{grid-template-columns:220px minmax(430px,650px)} .rightbar{display:none} }
@media (max-width:720px) {
  .auth-shell{display:block;padding:24px 0}.auth-brand{min-height:auto;padding:20px 24px 45px;border:0}.auth-brand>div{margin-top:80px}.auth-brand h1{font-size:52px}.signal-note{display:none}.auth-card{padding:25px}
  .app-shell{display:block}.sidebar{position:fixed;z-index:5;left:0;right:0;top:auto;bottom:0;width:auto;height:68px;padding:7px 17px calc(7px + env(safe-area-inset-bottom));border:0;border-top:1px solid var(--line);background:rgba(8,11,16,.94);backdrop-filter:blur(18px);flex-direction:row}.side-brand,.compose-trigger,.side-user{display:none}.sidebar nav{width:100%;display:flex;justify-content:space-around}.nav-item{width:auto;display:grid;gap:0;padding:6px 28px;text-align:center;font-size:10px}.nav-item .icon{margin:auto}.timeline{border:0;padding-bottom:70px}.mobile-header{height:64px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.feed-head{height:88px;padding:18px}.composer,.post{padding:18px;grid-template-columns:38px 1fr}.avatar{width:38px;height:38px}.post footer{justify-content:space-between;gap:0;padding-right:25px}
}
@media (max-width:420px) { .auth-brand h1{font-size:44px}.auth-brand>div{margin-top:55px}.auth-card{width:calc(100% - 28px)}.post-handle{display:none}.composer,.post{padding-left:14px;padding-right:14px} }