:root{--blue:#1877f2;--bg:#f0f2f5;--card:#fff;--muted:#65676b}
*{box-sizing:border-box}body{font-family:Inter,system-ui,Arial;margin:0;background:var(--bg);color:#111}
.topbar{height:60px;background:var(--card);display:flex;align-items:center;justify-content:space-between;padding:0 16px;box-shadow:0 1px 0 rgba(0,0,0,.06);position:sticky;top:0;z-index:5}
.logo{font-weight:700;color:var(--blue);font-size:20px}
.search input{padding:8px 12px;border-radius:999px;border:1px solid #ddd}
.actions{display:flex;gap:8px}
.container{display:grid;grid-template-columns:220px 1fr 260px;gap:16px;max-width:1100px;margin:18px auto;padding:0 12px}
.card{background:var(--card);padding:14px;border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,.04)}
.auth{max-width:520px;margin:0 auto}
.tabs{display:flex;gap:6px;margin-bottom:10px}
.tabs button{flex:1;padding:8px;border-radius:8px;border:none;background:#f1f1f1}
.tabs button.active{background:var(--blue);color:#fff}
.form{display:flex;flex-direction:column;gap:8px}
.form input, textarea{padding:10px;border:1px solid #ddd;border-radius:8px}
.btn{background:var(--blue);color:#fff;padding:9px 12px;border:none;border-radius:8px;cursor:pointer}
.btn.small{padding:6px 10px;font-size:13px}
.hide{display:none}
.feed .card{margin-bottom:12px}
#postText{width:100%;min-height:80px}
.post{margin-bottom:12px}
.post .meta{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.post .meta img{width:40px;height:40px;border-radius:50%}
.post .body{background:var(--card);padding:12px;border-radius:10px}
.post .actions{display:flex;gap:10px;margin-top:8px}
.post .actions button{background:#f0f2f5;border:none;padding:6px 8px;border-radius:8px}
.footer{text-align:center;padding:18px;color:var(--muted)}
@media (max-width:900px){.container{grid-template-columns:1fr;padding:12px}.left,.right{display:none}}