.ps-frontend-container { margin: 20px 0; }
.ps-block-title { font-size: 1.5rem; font-weight: bold; margin-bottom: 20px; border-bottom: 2px solid #2271b1; padding-bottom: 10px; }
.ps-layout-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.ps-layout-list .ps-item { display: flex; flex-direction: column; }
.ps-item { 
    transition-property: transform, box-shadow, border-color, opacity;
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-style: solid;
    overflow: hidden;
    position: relative;
}
.ps-item:hover { 
    transform: translateY(var(--ps-hover-translate-y, -5px)) scale(var(--ps-hover-scale, 1.05)) rotate(var(--ps-hover-rotate, 0deg));
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04) !important;
    z-index: 10;
}
.ps-item h3 { margin: 0; font-size: 1.25rem; display: flex; align-items: center; }
.ps-item h3 .dashicons { margin-right: 10px; }
.ps-summary { font-style: italic; position: relative; padding-left: 15px; border-left: 3px solid #cbd5e1; color: #475569; line-height: 1.6; margin: 15px 0; }
.ps-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; font-size: 0.85rem; color: #64748b; }
.ps-meta span { padding: 4px 8px; border-radius: 4px; border: 1px solid #e2e8f0; }
.ps-read-more { margin-top: 15px; text-align: right; }
.ps-read-more a { text-decoration: none; font-weight: 500; }
.ps-related { margin-top: 20px; padding-top: 15px; border-top: 1px dashed #e2e8f0; }
.ps-related-title { font-size: 0.9rem; font-weight: 600; color: #64748b; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.05em; }
.ps-related-links { display: flex; flex-wrap: wrap; gap: 8px; }
.ps-related-links a { font-size: 0.85rem; border: 1px solid #cbd5e1; padding: 4px 10px; border-radius: 15px; text-decoration: none; transition: all 0.2s; }

@keyframes ps-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ps-slide-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ps-zoom-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes ps-rotate { from { opacity: 0; transform: rotate(-10deg) scale(0.9); } to { opacity: 1; transform: rotate(0) scale(1); } }
@keyframes ps-flip { from { opacity: 0; transform: perspective(1000px) rotateX(-30deg); } to { opacity: 1; transform: perspective(1000px) rotateX(0); } }

.ps-animate-fade { animation: ps-fade var(--ps-anim-dur, 0.5s) var(--ps-anim-ease, ease) var(--ps-anim-del, 0s) forwards; }
.ps-animate-slide-up { animation: ps-slide-up var(--ps-anim-dur, 0.5s) var(--ps-anim-ease, ease) var(--ps-anim-del, 0s) forwards; }
.ps-animate-zoom-in { animation: ps-zoom-in var(--ps-anim-dur, 0.5s) var(--ps-anim-ease, ease) var(--ps-anim-del, 0s) forwards; }
.ps-animate-rotate { animation: ps-rotate var(--ps-anim-dur, 0.5s) var(--ps-anim-ease, ease) var(--ps-anim-del, 0s) forwards; }
.ps-animate-flip { animation: ps-flip var(--ps-anim-dur, 0.5s) var(--ps-anim-ease, ease) var(--ps-anim-del, 0s) forwards; }

.ps-scroll-animate { opacity: 0; }
.ps-scroll-animate.ps-anim-fade { transform: none; }
.ps-scroll-animate.ps-anim-slide-up { transform: translateY(30px); }
.ps-scroll-animate.ps-anim-zoom-in { transform: scale(0.9); }
.ps-scroll-animate.ps-anim-rotate { transform: rotate(-10deg) scale(0.9); }
.ps-scroll-animate.ps-anim-flip { transform: perspective(1000px) rotateX(-30deg); }

.ps-scroll-animate.ps-is-visible { 
    opacity: 1; 
    transform: none; 
    transition: opacity var(--ps-anim-dur, 0.5s) var(--ps-anim-ease, ease) var(--ps-anim-del, 0s), 
                transform var(--ps-anim-dur, 0.5s) var(--ps-anim-ease, ease) var(--ps-anim-del, 0s);
}