.wpct-recent {
--wpct-ink: #12294a;
--wpct-text: #1a2a45;
--wpct-muted: #6a7890;
--wpct-line: #e6edf6;
--wpct-bg: #f4f8fd;
--wpct-green: #1f8a4c;
--wpct-green-bg: #e7f6ec;
--wpct-green-bd: #bfe6cc;
position: relative;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
color: var(--wpct-text);
box-sizing: border-box;
}
.wpct-recent *, .wpct-recent *::before, .wpct-recent *::after { box-sizing: inherit; }

.wpct-recent-viewport { overflow: hidden; }
.wpct-recent-track {
display: flex;
gap: 20px;
}

/* Carousel: 3 per view */
.wpct-recent-carousel .wpct-recent-card {
flex: 0 0 calc((100% - 40px) / 3);
}
.wpct-recent-carousel .wpct-recent-track {
transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}

/* Grid: 3 columns, wraps, equal-height rows */
.wpct-recent-grid .wpct-recent-track {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: stretch;
}

.wpct-recent-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 2px solid var(--wpct-line);
    border-radius: 14px;
    padding: 14px;
    box-shadow:
        0 4px 10px rgba(5, 35, 85, 0.10),
        0 10px 24px rgba(5, 35, 85, 0.12);
    transition: transform .25s ease, box-shadow .25s ease;
    text-decoration: none;
    color: inherit;
}
.wpct-recent-card:hover, .wpct-recent-card:focus { text-decoration: none; color: inherit; }
.wpct-recent-card:hover {
transform: translateY(-4px);
box-shadow: 0 6px 16px rgba(5, 35, 85, .12), 0 20px 44px rgba(5, 35, 85, .18);
}

.wpct-recent-thumb {
position: relative;
flex: 0 0 auto;
width: 80px;
height: 80px;
border-radius: 12px;
background: var(--wpct-bg);
overflow: hidden;
}
.wpct-recent-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .4s ease;
}
.wpct-recent-card:hover .wpct-recent-thumb img { transform: scale(1.08); }
.wpct-recent-noimg {
display: block;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #e7f0fb, #f4f8fd);
}

.wpct-recent-body {
display: flex;
flex-direction: column;
gap: 6px;
flex: 1 1 auto;
min-width: 0;
}
.wpct-recent-meta {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.wpct-recent-version {
padding: 3px 10px;
border-radius: 999px;
background: var(--wpct-green-bg);
border: 1.5px solid var(--wpct-green);
color: var(--wpct-green);
font-size: 12px;
font-weight: 700;
}
.wpct-recent-date { font-size: 12px; font-weight: 500; color: var(--wpct-muted); }

.wpct-recent-title {
margin: 0;
font-size: 16px;
font-weight: 700;
line-height: 1.3;
color: var(--wpct-text);
}
.wpct-recent-desc {
margin: 0;
font-size: 13px;
line-height: 1.55;
color: var(--wpct-muted);
font-weight: 500;
cursor: pointer;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color .2s ease;
}
.wpct-recent-desc:hover { color: var(--wpct-text); }
.wpct-recent-desc.is-open { -webkit-line-clamp: unset; overflow: visible; }

/* Arrows */
.wpct-recent-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
width: 55px;
height: 55px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--wpct-line);
border-radius: 50%;
background: #fff;
color: var(--wpct-ink);
cursor: pointer;
box-shadow: 0 4px 14px rgba(5, 35, 85, .14);
transition: background .2s ease, color .2s ease;
}
.wpct-recent-arrow:hover,
.wpct-recent-arrow:focus,
.wpct-recent-arrow:focus-visible,
.wpct-recent-arrow:active { 
    background: #1a4d80 !important; color: #fff !important; border-color: #1a4d80 !important; }
.wpct-recent-arrow svg { width: 24px; height: 24px; fill: currentColor; }
.wpct-recent-prev { left: -40px; }
.wpct-recent-next { right: -30px; }

/* Dots */
.wpct-recent-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 18px;
}
.wpct-recent-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #cdd7e5 !important;
border: none;
padding: 0;
cursor: pointer;
transition: background .2s ease, transform .2s ease;
}
.wpct-recent-dot.is-active { background: #1a4d80 !important; transform: scale(1.25); }

@media (max-width: 900px) {
.wpct-recent-carousel .wpct-recent-card { flex-basis: calc((100% - 20px) / 2); }
.wpct-recent-grid .wpct-recent-track { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.wpct-recent-carousel .wpct-recent-card { flex-basis: 100%; }
.wpct-recent-grid .wpct-recent-track { grid-template-columns: 1fr; }
.wpct-recent-prev { left: 2px; }
.wpct-recent-next { right: 2px; }
}