/* --- Animations --- */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes popIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* --- Font Family --- */
body{font-family:'Roboto', sans-serif;background-color:#fff;margin:0;color:#000; animation: fadeIn 0.5s ease-out;}
h1, h2, h3, h4, .logo, .post-author, .title-box, .tab-button, .post-button, .auth-form button, .profile-name {
    font-family: 'Roboto Slab', serif;
}

*{box-sizing:border-box}
.top-bar{border-bottom:5px solid #000;padding:10px 20px}
.container{max-width:900px;margin:0 auto}
header{display:flex;justify-content:space-between;align-items:center}
.logo-icon{background-color:#d93a3e;color:#fff;padding:5px 12px;margin-right:15px;border:4px solid #000;font-size:28px; box-shadow: 4px 4px 0px #000;}
nav a{text-decoration:none;color:#000;font-weight:700;padding:8px 12px;border:4px solid #000;margin-left:10px;background-color:#fff; transition: all 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55); box-shadow: 4px 4px 0px #000;}
nav a:hover,nav a.active{background-color:#f0f0f0; transform: translate(2px, 2px); box-shadow: 2px 2px 0px #000;}
.post{border:5px solid #000;margin-bottom:25px;background-color:#fff; animation: popIn 0.5s ease-out forwards; box-shadow: 6px 6px 0px #000; transition: all 0.2s ease-out;}
.post:hover { transform: translateY(-5px); box-shadow: 10px 10px 0px #000; }
.post-image { width: 100%; height: auto; max-height: 500px; object-fit: cover; border-bottom: 5px solid #000; }
.post-title { font-size: 24px; font-weight: 900; margin-top: 0; margin-bottom: 15px; }
.post-body-summary { max-height: 100px; overflow: hidden; position: relative; }
.post-body-summary:after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 40px; background: linear-gradient(to bottom, transparent, white); }

/* --- Comments Section --- */
.comment-form-container { border: 5px solid #000; padding: 20px; margin-bottom: 20px; box-shadow: 6px 6px 0px #000; }
.comments-section { border: 5px solid #000; padding: 20px; box-shadow: 6px 6px 0px #000; }
.comment { border-bottom: 3px solid #eee; padding: 15px 0; }
.comment:last-child { border-bottom: none; }
.comment-header { display: flex; align-items: center; margin-bottom: 10px; }
.comment-author { font-weight: 900; font-family: 'Roboto Slab', serif; color: #000; text-decoration: none; }
.comment-date { color: #65676b; font-size: 12px; margin-left: 10px; }
.comment-body p { margin: 0; }

/* Other styles are unchanged... */