* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: #f4efe7; color: #2b2118; }
header { background: linear-gradient(135deg, #6b3f24, #a76f3f); color: white; padding: 22px; text-align: center; }
header h1 { margin: 0; font-size: 34px; }
header p { margin: 6px 0 0; font-size: 16px; }
nav { background: #3a2618; padding: 12px; text-align: center; }
nav a { color: white; text-decoration: none; margin: 0 10px; font-weight: bold; }
.container { width: min(980px, 94%); margin: 24px auto; }
.card { background: white; border-radius: 14px; padding: 18px; box-shadow: 0 3px 14px rgba(0,0,0,0.08); margin-bottom: 18px; }
input, textarea { width: 100%; padding: 12px; margin: 7px 0 14px; border: 1px solid #d7c6b6; border-radius: 10px; font-size: 15px; }
textarea { min-height: 110px; resize: vertical; }
button, .button { background: #8d5524; color: white; border: 0; padding: 11px 17px; border-radius: 10px; cursor: pointer; font-weight: bold; text-decoration: none; display: inline-block; }
button:hover, .button:hover { background: #6b3f24; }
a { color: #6b3f24; }
.error { background: #ffe2e2; border: 1px solid #e69a9a; color: #7d1414; padding: 12px; border-radius: 10px; margin-bottom: 15px; }
.success { background: #e4ffe9; border: 1px solid #8fd09b; color: #105b1c; padding: 12px; border-radius: 10px; margin-bottom: 15px; }
.post-meta { font-size: 13px; color: #75675c; margin-bottom: 8px; }
.footer { text-align: center; color: #7a6d61; font-size: 13px; margin: 40px 0 20px; }
.profile-card { display: flex; gap: 22px; align-items: center; }
.avatar-wrap { flex: 0 0 auto; }
.avatar-big { width: 130px; height: 130px; object-fit: cover; border-radius: 50%; border: 5px solid #f4efe7; }
.avatar-placeholder { width: 130px; height: 130px; border-radius: 50%; background: #8d5524; color: white; display: flex; align-items: center; justify-content: center; font-size: 54px; font-weight: bold; border: 5px solid #f4efe7; }
.avatar-preview { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; border: 4px solid #f4efe7; }
.avatar-small { width: 34px; height: 34px; object-fit: cover; border-radius: 50%; margin-right: 10px; }
.post-author-line { display: flex; align-items: center; gap: 4px; }
.profile-info h2 { margin-top: 0; }
@media (max-width: 640px) { .profile-card { flex-direction: column; text-align: center; } nav a { display: inline-block; margin: 6px; } }

.inline-form { display: inline-block; margin: 0; }
.post-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.sit-button { background: #6b3f24; }
.sit-button.active { background: #2e7d32; }
.comment-card { border-left: 5px solid #d7c6b6; }