:root{ --bg:#0b0b10; --card:#1d1d29; --text:#fff; --muted:#b8b8c7; --accent:#7c4dff; }
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--text); font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
a{ color:#fff; }
.container{ max-width:900px; margin:20px auto; padding:0 15px; }
.top{ background:#14141d; display:flex; justify-content:space-between; align-items:center; padding:12px 16px; position:sticky; top:0; z-index:1; }
.brand{ font-weight:800; }
nav a{ margin-left:12px; text-decoration:none; color:#fff; }
.card{ background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px; margin-bottom:12px; }
.alert{ background:#2b2b38; border-left:4px solid #ff7a7a; padding:10px; border-radius:8px; margin-bottom:12px; }
input, textarea, button{ width:100%; padding:10px; border-radius:10px; border:1px solid rgba(255,255,255,.12); background:#0f0f15; color:#fff; margin:6px 0; }
button{ background:var(--accent); border:none; cursor:pointer; }
.row{ display:flex; gap:10px; align-items:center; }
.inline{ display:inline-block; }
.muted{ color:var(--muted); font-size:.9rem; }
.avatar{ width:44px; height:44px; border-radius:50%; background:#333; }
.avatar.big{ width:80px; height:80px; }
.avatar.small{ width:32px; height:32px; }
.post-image{ width:100%; height:auto; border-radius:10px; margin-top:8px; }
.post-header{ display:flex; gap:10px; align-items:center; margin-bottom:6px; }
.username a{ color:#fff; text-decoration:none; }
.post-actions{ display:flex; align-items:center; gap:10px; }
.badge{ display:inline-block; background:#333; padding:4px 8px; border-radius:999px; }
.create-post textarea{ min-height:80px; }