*{margin:0;padding:0;box-sizing:border-box}
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#f5f5f5;color:#222;line-height:1.5}
.topbar{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid #ddd;height:60px}
.topbar-inner{max-width:1200px;margin:0 auto;height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 20px}
.logo{font-weight:800;font-size:20px;cursor:pointer}
.btn{border:0;background:#eee;border-radius:6px;padding:8px 12px;cursor:pointer}
.btn:hover{background:#e2e2e2}
.btn.primary{background:#3b82f6;color:#fff}
.btn.primary:hover{background:#2563eb}
.btn.link{background:transparent;color:#3b82f6}
.hidden{display:none!important}

.layout{max-width:1200px;margin:20px auto;display:flex;padding:0 20px}
.sidebar{width:200px;position:sticky;top:80px;height:fit-content;display:flex;flex-direction:column;gap:10px}
.nav-btn{padding:10px 12px;background:#fff;border:1px solid #ddd;border-radius:8px;text-align:left;cursor:pointer}
.nav-btn.active{background:#3b82f6;color:#fff;border-color:#2563eb}

.feed{flex:1;margin-left:20px;display:flex;flex-direction:column;gap:16px}
.post{width:720px;background:#fff;border:1px solid #eee;border-radius:12px;padding:16px;box-shadow:0 2px 10px rgba(0,0,0,.03);max-height:1000px;overflow:hidden}
.post.full{max-height:none}
.post-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:14px;color:#555}
.author{display:flex;gap:10px;align-items:center;cursor:pointer}
.avatar{width:40px;height:40px;border-radius:50%;background:#ddd;object-fit:cover}
.avatar-large{width:80px;height:80px;border-radius:50%;background:#ddd;object-fit:cover}
.post-title{font-size:22px;font-weight:800;margin:6px 0 10px}
.post-image{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;margin:8px 0}
.post-text{white-space:pre-wrap}
.post-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #eee;padding-top:10px;margin-top:12px}

.vote-panel,.votes{display:flex;gap:8px;align-items:center}
.vote{border:0;background:transparent;cursor:pointer;font-size:18px;color:#aaa}
.vote.up.active{color:green}
.vote.down.active{color:red}
.rating{min-width:28px;text-align:center;font-weight:700;color:#777}
.rating.positive{color:green}
.rating.negative{color:red}

.pagination{display:flex;justify-content:center;gap:8px;margin:6px 0}
.page-btn{padding:6px 10px;border:1px solid #ddd;border-radius:8px;background:#fff;cursor:pointer}
.page-btn.active{background:#3b82f6;color:#fff;border-color:#2563eb}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:2000}
.modal.hidden{display:none}
.modal-content{width:420px;max-width:92vw;background:#fff;border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:10px}
.modal-content h2{font-size:18px}
.modal-content input,.modal-content textarea{width:100%;border:1px solid #ddd;border-radius:10px;padding:10px;font-size:14px}
.modal-content textarea{min-height:170px;resize:vertical}
.image-upload{display:inline-block;color:#3b82f6;cursor:pointer}
.editor-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:8px}

.profile-info{display:flex;gap:16px;align-items:center;padding:10px 0 14px;border-bottom:1px solid #ddd;width:720px;background:#fff;border-radius:12px;padding:16px}
.profile-header h1{font-size:24px;margin-bottom:6px}
.profile-header p{color:#555}
.profile-sort{display:flex;gap:10px;width:720px}
.sort-btn{padding:8px 12px;border-radius:10px;border:1px solid #ddd;background:#fff;cursor:pointer}
.sort-btn.active{background:#3b82f6;color:#fff;border-color:#2563eb}
.btn.danger { background: #ef4444; color: #fff; }
.btn.danger:hover { background: #b91c1c; }

.hint { font-size: 13px; color: #666; margin-top: -4px; }
.hint.ok { color: #16a34a; }
.hint.bad { color: #dc2626; }
.hint.wait { color: #6b7280; }