li {
    list-style: none;
    padding: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 8px;
    background: rgba(10, 31, 45, 0.82);
    margin: 1rem 0;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

li:hover {
    border-color: rgba(218, 246, 255, 0.6);
    background: rgba(16, 47, 67, 0.92);
    transform: translateY(-2px);
}

li h1,
li h2 {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    color: #daf6ff;
}

li p {
    margin: 0.35rem 0;
    color: #e5f1ff;
}

li p.meta {
    color: rgba(229, 241, 255, 0.6);
    font-size: 0.85rem;
}

.poster-name {
    text-decoration: underline;
}

.post-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.75rem 0;
}

.category {
    padding: 0.2rem 0.5rem;
    border: 1px solid rgba(218, 246, 255, 0.45);
    border-radius: 999px;
    color: #daf6ff;
    background: rgba(218, 246, 255, 0.08);
    font-size: 0.72rem;
}

.category-muted {
    color: rgba(229, 241, 255, 0.6);
}

.post-views {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    color: rgba(229, 241, 255, 0.6);
    font-size: 0.75rem;
}

li .dot {
    margin: 0 0.35rem;
    opacity: 0.6;
}

li hr.divider {
    margin: 0.75rem 0;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.post-preview-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.post-preview-link:hover {
    color: #daf6ff;
}