@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes slideUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

body {
    background-color: #fafaf9;
    transition: background-color 0.4s ease, color 0.4s ease;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior-y: none;
}
.dark body { background-color: #1c1917; color: #e7e5e4; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.line-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

.no-save {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    pointer-events: none;
}

.feed-tab {
    position: relative;
    color: #a8a29e;
    transition: all 0.3s ease;
}
.feed-tab:hover { color: #000000; }
.dark .feed-tab:hover { color: #e7e5e4; }

/* ... */

.dark input.peer:not(:checked) + div.peer {
    background-color: #44403c !important; /* Lighter stone-700 equivalent */
}
.dark input.peer:checked + div.peer {
    background-color: #e7e5e4 !important; /* Lighter stone-200 equivalent */
}

#tab-viral.active { color: #10b981; }
#tab-echoes.active { color: #f59e0b; }
#tab-stories.active { color: #3b82f6; }
#tab-confrants.active { color: #ff5722; }

.feed-tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background-color: transparent;
    border-radius: 2px 2px 0 0;
    transition: all 0.3s ease;
}
.feed-tab.active::after { width: 100%; }
#tab-viral.active::after { background-color: #10b981; }
#tab-echoes.active::after { background-color: #f59e0b; }
#tab-stories.active {
    background: linear-gradient(to right, #6366f1, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
#tab-stories.active::after { background: linear-gradient(to right, #6366f1, #ec4899); }
#tab-confrants.active::after { background-color: #ff5722; }

.rank-badge-mini {
    position: absolute;
    top: -12px;
    left: -12px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: white;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    z-index: 20;
}
.dark .rank-badge-mini { border-color: #1c1917; }

.glass-btn {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.glass-btn:active { transform: scale(0.97); }

/* Premium Neo-Brutalism Theme */
.brutal body {
    background-color: #F4F0EA !important; /* Soft warm off-white */
    color: #2D2A26 !important; /* Soft dark gray instead of pure black */
    background-image: radial-gradient(#D5D0C8 1.5px, transparent 1.5px);
    background-size: 24px 24px;
}
.brutal .bg-white, .brutal .bg-stone-50, .brutal .bg-stone-100 {
    background-color: #FFFFFF !important;
}

.brutal .dark\:bg-stone-800, .brutal .dark\:bg-stone-700 {
    background-color: #FFFFFF !important;
}

.brutal header {
    background-color: #FFD23F !important; /* Premium vibrant yellow */
    border-bottom: 3px solid #2D2A26 !important;
    box-shadow: none !important;
}
.brutal #feed-container > div {
    border: 3px solid #2D2A26 !important;
    border-radius: 16px !important; /* Softer corners */
    box-shadow: 6px 6px 0px #2D2A26 !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: #ffffff !important;
}
/* Premium Vibrant Backgrounds for Cards */
.brutal #feed-container > div:nth-child(4n+1) { background-color: #FFE5F1 !important; } /* Soft Magenta */
.brutal #feed-container > div:nth-child(4n+2) { background-color: #E5F9FF !important; } /* Soft Cyan */
.brutal #feed-container > div:nth-child(4n+3) { background-color: #EFFFEC !important; } /* Soft Lime */
.brutal #feed-container > div:nth-child(4n+4) { background-color: #FFF3E5 !important; } /* Soft Orange */

.brutal #feed-container > div:hover {
    transform: translate(-4px, -4px);
    box-shadow: 10px 10px 0px #2D2A26 !important;
}
.brutal button:not(.feed-tab):not(.text-stone-400), 
.brutal a:not(.feed-tab):not(.text-stone-400), 
.brutal .rounded-xl:not(header *), 
.brutal .rounded-2xl:not(header *), 
.brutal .rounded-full:not(header *) {
    border: 2px solid #2D2A26 !important;
    border-radius: 12px !important;
    box-shadow: 4px 4px 0px #2D2A26 !important;
    font-weight: 600 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.brutal button:not(.feed-tab):not(.text-stone-400):hover,
.brutal a:not(.feed-tab):not(.text-stone-400):hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px #2D2A26 !important;
}
.brutal button:not(.feed-tab):not(.text-stone-400):active,
.brutal a:not(.feed-tab):not(.text-stone-400):active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px #2D2A26 !important;
}
.brutal .post-avatar img {
    border: 2px solid #2D2A26 !important;
    border-radius: 6px !important;
    box-shadow: 2px 2px 0px #2D2A26 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.brutal .text-stone-400, .brutal .text-stone-500, .brutal .text-stone-300 {
    color: #2D2A26 !important; /* Increased contrast for better visibility */
    opacity: 1 !important;
    font-weight: 500 !important;
}

.brutal .dark\:text-stone-200, 
.brutal .dark\:text-stone-300, 
.brutal .dark\:text-stone-400, 
.brutal .dark\:text-stone-500,
.brutal .dark\:text-white {
    color: #2D2A26 !important;
}

.brutal .text-stone-400:hover, .brutal .text-stone-500:hover, .brutal .text-stone-300:hover,
.brutal .group-hover\:text-stone-500:hover, .brutal .group-hover\:text-stone-600:hover, .brutal .dark\:group-hover\:text-stone-300:hover,
.brutal .text-stone-800:hover, .brutal .text-stone-700:hover,
.brutal .dark\:hover\:text-stone-300:hover, .brutal .dark\:hover\:text-stone-200:hover {
    color: #000000 !important; /* Darker on hover */
    opacity: 1 !important;
}

.brutal .feed-tab:hover,
.brutal.dark .feed-tab:hover,
.brutal .dark .feed-tab:hover {
    color: #000000 !important;
}

/* Fix Dark AI button wrapping on small screens in Brutalism theme */
@media (max-width: 639px) {
    .brutal footer a.glass-btn {
        white-space: nowrap !important;
        letter-spacing: -0.2px !important;
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
        gap: 0.25rem !important;
    }
    .brutal footer .gap-3.max-w-lg {
        gap: 0.5rem !important;
    }
}

.brutal #feed-container > div:hover .text-stone-400,
.brutal #feed-container > div:hover .text-stone-500,
.brutal #feed-container > div:hover .text-stone-300,
.brutal #feed-container > div:hover .text-stone-800,
.brutal #feed-container > div:hover .text-stone-700 {
    color: #000000 !important;
    opacity: 1 !important;
}

.brutal input, .brutal textarea {
    background-color: #FFFFFF !important;
    color: #2D2A26 !important;
    border: 2px solid #2D2A26 !important;
    border-radius: 8px !important;
    padding: 8px !important;
    caret-color: #2D2A26 !important;
}
.brutal .font-bold {
    font-weight: 600 !important; /* Not too bold */
    letter-spacing: normal;
    -webkit-text-stroke: 0px;
}
.brutal #filter-status > div {
    border: 3px solid #2D2A26 !important;
    border-radius: 12px !important;
    box-shadow: 6px 6px 0px #2D2A26 !important;
    background-color: #0EAD69 !important; /* Premium Green */
    color: #FFFFFF !important;
}
.brutal #filter-status > div * {
    color: #FFFFFF !important;
}
.brutal .logo-box {
    background-color: #FFF0ED;
    border: 2px solid #2D2A26;
    padding: 1px 8px;
    border-radius: 8px;
    box-shadow: 2px 2px 0px #2D2A26;
    transform: rotate(-2deg);
    transition: all 0.3s ease;
}
.brutal .logo-box:hover {
    transform: rotate(0deg) scale(1.05);
}
.brutal .logo-box img {
    filter: none !important;
    opacity: 1 !important;
}
.brutal input.peer:not(:checked) + div.peer {
    background-color: #a8a29e !important;
}
.brutal input.peer:checked + div.peer {
    background-color: #000000 !important;
}
.brutal header .flex.justify-end button {
    background-color: #F1E9F7 !important;
}
.brutal #user-btn {
    background-color: #3BCEAC !important; /* Logged out */
}
.brutal #user-btn.logged-in {
    background-color: #FF4444 !important; /* Red (Logged in) */
}
.brutal #user-btn svg {
    color: #FFFFFF !important;
}
.brutal #icon-user-avatar {
    background-color: transparent !important;
    color: #FFFFFF !important;
}
.brutal .font-username {
    color: #2D2A26 !important;
}
.brutal button[type="submit"],
.brutal #btn-follow {
    background-color: #FF9CEE !important; /* Light Pink */
    color: #2D2A26 !important;
}
.brutal .x-social-link {
    background-color: #000000 !important;
    color: #FFFFFF !important;
    box-shadow: 4px 4px 0px #D5D0C8 !important;
    border: 2px solid #000000 !important;
}
.brutal .x-social-link:hover {
    color: #FFFFFF !important;
}
.brutal .vote-count {
    color: #2D2A26 !important;
}
.brutal footer a, .brutal footer button {
    padding-left: 15px !important;
    padding-right: 15px !important;
    min-width: auto !important;
    color: #2D2A26 !important;
    opacity: 0.7 !important;
}

.brutal footer a:hover, .brutal footer button:hover {
    opacity: 1 !important;
    text-decoration: underline !important;
    color: #2D2A26 !important;
}

.brutal #post-page-name {
    color: #2D2A26 !important;
}

.brutal #btn-mode-login, .brutal #btn-mode-signup {
    color: #2D2A26 !important;
    opacity: 0.6 !important;
}

.brutal #btn-mode-login.font-bold, .brutal #btn-mode-signup.font-bold {
    opacity: 1 !important;
    text-decoration: underline !important;
}

.brutal #profile-username,
.brutal #profile-bio,
.brutal #profile-posts-count,
.brutal #profile-likes-count,
.brutal #profile-followers-count,
.brutal #profile-following-count {
    color: #2D2A26 !important;
}
.brutal .font-feed {
    color: #2D2A26 !important;
    font-weight: 500 !important;
}
.brutal .rank-badge-mini {
    border: 2px solid #2D2A26 !important;
    border-radius: 50% !important;
    box-shadow: 2px 2px 0px #2D2A26 !important;
}
.brutal #view-echo h2,
.brutal #view-confrant h2,
.brutal #view-story h2,
.brutal #view-confrant span.font-bold,
.brutal #view-story span.font-bold {
    color: #000000 !important;
}

/* --- Professional Animations (Light/Dark) --- */
@keyframes fadeScaleIn {
    0% { opacity: 0; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes floatSubtle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
@keyframes slideInRight {
    0% { opacity: 0; transform: translateX(20px); }
    100% { opacity: 1; transform: translateX(0); }
}
@keyframes pulseSoft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.pro-animate-fade-scale { animation: fadeScaleIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.pro-hover-float:hover { animation: floatSubtle 2s ease-in-out infinite; }
.pro-hover-pop { transition: transform 0.2s ease-out; }
.pro-hover-pop:hover { transform: scale(1.05); }
.pro-hover-glow:hover { box-shadow: 0 0 15px rgba(16, 185, 129, 0.3); }
.dark .pro-hover-glow:hover { box-shadow: 0 0 15px rgba(16, 185, 129, 0.15); }

/* --- Funky Animations (Brutalism) --- */
@keyframes brutalSlam {
    0% { opacity: 0; transform: scale(1.2) rotate(-3deg) translateY(-30px); box-shadow: 0 0 0 #2D2A26; }
    50% { opacity: 1; transform: scale(0.95) rotate(1deg) translateY(5px); box-shadow: 12px 12px 0 #2D2A26; }
    100% { opacity: 1; transform: scale(1) rotate(0deg) translateY(0); box-shadow: 6px 6px 0 #2D2A26; }
}
@keyframes brutalWobble {
    0%, 100% { transform: rotate(0deg) scale(1.05); }
    25% { transform: rotate(-3deg) scale(1.05); }
    75% { transform: rotate(3deg) scale(1.05); }
}
@keyframes brutalShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px) rotate(-2deg); }
    75% { transform: translateX(4px) rotate(2deg); }
}
@keyframes brutalPop {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* Apply Brutalism Animations dynamically */
.brutal #feed-container > div {
    animation: brutalSlam 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    opacity: 0;
}
.brutal button:not(.feed-tab):hover, 
.brutal a.glass-btn:hover,
.brutal .action-btn:hover {
    animation: brutalWobble 0.4s ease-in-out infinite alternate !important;
}
.brutal .logo-box:hover {
    animation: brutalShake 0.3s ease-in-out infinite !important;
}
.brutal .rank-badge-mini {
    animation: brutalPop 1s ease-in-out infinite !important;
}
/* Removed brutalShake animation on hover */

/* Professional Staggered Entrance */
html:not(.brutal) #feed-container > div {
    animation: fadeScaleIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}
#feed-container > div:nth-child(1) { animation-delay: 0.05s; }
#feed-container > div:nth-child(2) { animation-delay: 0.1s; }
#feed-container > div:nth-child(3) { animation-delay: 0.15s; }
#feed-container > div:nth-child(4) { animation-delay: 0.2s; }
#feed-container > div:nth-child(5) { animation-delay: 0.25s; }
#feed-container > div:nth-child(6) { animation-delay: 0.3s; }
#feed-container > div:nth-child(7) { animation-delay: 0.35s; }
#feed-container > div:nth-child(8) { animation-delay: 0.4s; }
#feed-container > div:nth-child(9) { animation-delay: 0.45s; }
#feed-container > div:nth-child(10) { animation-delay: 0.5s; }
#feed-container > div:nth-child(11) { animation-delay: 0.55s; }
#feed-container > div:nth-child(12) { animation-delay: 0.6s; }