body { background-color: #f4f6f8; }
.detail-card { background: #fff; border-radius: 16px; border: 1px solid #ebedf0; box-shadow: 0 1px 3px rgba(0,0,0,0.04); margin-bottom: 20px; overflow: hidden; }
.hero-img-container { aspect-ratio: 1200 / 630; position: relative; border-radius: 12px; overflow: hidden; }
.hero-img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 768px) { .hero-img-container { aspect-ratio: 1200 / 630; } }

.animated-comment { opacity: 0; transform: translateY(20px); transition: opacity 1s ease, transform 1s ease; }
.animated-comment.fade-in { opacity: 1; transform: translateY(0); }
.fade { opacity: 0; transition: opacity 0.8s ease-in-out; }
.fade.show { opacity: 1; }

.nav-pills.media-tabs .nav-link { border-radius: 50px; color: #555; padding: 8px 20px; font-weight: 600; margin-right: 8px; border: 1px solid transparent; }
.nav-pills.media-tabs .nav-link.active { background-color: #198754; color: #ffffff !important; border-color: #198754; box-shadow: 0 4px 6px rgba(25, 135, 84, 0.2); }
.nav-pills.media-tabs .nav-link.active i { color: #ffffff !important; }
.nav-pills.media-tabs .nav-link:hover:not(.active) { background-color: #e9ecef; }

.floating-action-bar { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #ebedf0; padding: 12px 20px; z-index: 1000; box-shadow: 0 -4px 12px rgba(0,0,0,0.05); }
.main-content { margin-bottom: 80px; }
.user-profile-anchor { text-decoration: none; color: inherit; }
.user-profile-anchor:hover { color: inherit; }