.pcd {
    --pcd-r-orange: #f0a43b;
    --pcd-r-red: #ec4f6a;
    --pcd-r-purple: #a468d8;
    --pcd-r-blue: #5a8de0;
    --pcd-r-military: #5dba8d;
    --pcd-card: #23232c;
    --pcd-card-2: #2a2a34;
    --pcd-border: rgba(255,255,255,.08);
    --pcd-text: #eef0f7;
    --pcd-muted: #8f95ad;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid var(--pcd-border);
    background: var(--pcd-card);
    color: var(--pcd-text);
}
.pcd[data-palette="neon"] {
    --pcd-r-orange: #ffb800;
    --pcd-r-red: #ff2e63;
    --pcd-r-purple: #c86bff;
    --pcd-r-blue: #00b3ff;
    --pcd-r-military: #2de2a6;
}
.pcd[data-palette="pastel"] {
    --pcd-r-orange: #f6c177;
    --pcd-r-red: #eb6f92;
    --pcd-r-purple: #c4a7e7;
    --pcd-r-blue: #9ccfd8;
    --pcd-r-military: #a3be8c;
}
.pcd[data-palette="mono"] {
    --pcd-r-orange: #ffffff;
    --pcd-r-red: #d9dbe4;
    --pcd-r-purple: #b3b7c6;
    --pcd-r-blue: #8f94a6;
    --pcd-r-military: #6c7184;
}
.pcd-r--orange { --r: var(--pcd-r-orange); }
.pcd-r--red { --r: var(--pcd-r-red); }
.pcd-r--purple { --r: var(--pcd-r-purple); }
.pcd-r--blue { --r: var(--pcd-r-blue); }
.pcd-r--military { --r: var(--pcd-r-military); }

.pcd *,
.pcd *::before,
.pcd *::after {
    box-sizing: border-box;
}

.pcd__head {
    display: flex;
    align-items: center;
    gap: 11px;
}
.pcd__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(155deg, #ffc861, #ff7a1a);
    color: #fff;
    font-size: 19px;
    box-shadow: 0 8px 18px -10px rgba(255,122,26,.8);
}
.pcd__titles {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}
.pcd__titles b {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--pcd-text);
}
.pcd__titles span {
    font-size: 12px;
    color: var(--pcd-muted);
}
.pcd__link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--pcd-muted) !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: color .18s ease;
}
.pcd__link:hover {
    color: var(--pcd-text) !important;
}
.pcd__link i {
    font-size: 17px;
}

.pcd-last {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--r) 45%, transparent);
    background: linear-gradient(120deg, color-mix(in srgb, var(--r) 18%, var(--pcd-card-2)), var(--pcd-card-2) 70%);
    color: var(--pcd-text) !important;
    text-decoration: none !important;
    overflow: hidden;
    isolation: isolate;
    transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease;
}
.pcd-last:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px -22px color-mix(in srgb, var(--r) 80%, #000);
}
.pcd-last__glow {
    position: absolute;
    z-index: -1;
    left: -20px;
    top: 50%;
    width: 160px;
    height: 160px;
    margin-top: -80px;
    border-radius: 50%;
    background: var(--r);
    opacity: .22;
    filter: blur(40px);
}
.pcd-last__media {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
}
.pcd-last__media img,
.pcd-last__media video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 10px;
    filter: drop-shadow(0 10px 14px rgba(0,0,0,.45));
}
.pcd-last__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.pcd-last__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}
.pcd-last__badge,
.pcd-last__rarity {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 21px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.pcd-last__badge {
    background: rgba(255,255,255,.08);
    color: var(--pcd-text);
}
.pcd-last__badge i {
    font-size: 12px;
    color: #ffc861;
}
.pcd-last__rarity {
    background: color-mix(in srgb, var(--r) 18%, transparent);
    color: var(--r);
}
.pcd-last .pcd-line__title {
    font-size: 17px;
}
.pcd-last__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--pcd-muted);
    min-width: 0;
}
.pcd-last__meta img {
    flex: 0 0 auto;
    width: 22px;
    height: 18px;
    object-fit: contain;
}

.pcd-line__title {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--r);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pcd-line__sub {
    font-size: 12px;
    color: var(--pcd-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pcd-line__extra {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--pcd-text);
    opacity: .8;
}

.pcd__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.pcd__list:empty {
    display: none;
}
.pcd-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 9px 10px 9px 12px;
    border-radius: 12px;
    border: 1px solid var(--pcd-border);
    background: var(--pcd-card-2);
    color: var(--pcd-text) !important;
    text-decoration: none !important;
    overflow: hidden;
    transition: border-color .18s ease, transform .18s ease;
    animation: pcdIn .35s cubic-bezier(.22,1,.36,1) both;
}
.pcd-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--r);
}
.pcd-item:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--r) 45%, transparent);
}
.pcd-item__media {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
}
.pcd-item__media img,
.pcd-item__media video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
}
.pcd-item__body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.pcd-item__meta {
    font-size: 11px;
    color: var(--pcd-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pcd-item .pcd-line__sub {
    display: none;
}

.pcd__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    border: 1px solid var(--pcd-border);
    border-radius: 12px;
    background: var(--pcd-card-2);
    color: var(--pcd-muted);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease;
}
.pcd__more:hover {
    color: var(--pcd-text);
    border-color: rgba(255,255,255,.18);
}
.pcd__more i {
    font-size: 18px;
}
.pcd__more.is-loading i {
    animation: pcdSpin .8s linear infinite;
}

.pcd--bare {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.pcd-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.pcd-carousel {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
    scrollbar-width: thin;
}
.pcd-carousel .pcd-tile {
    flex: 0 0 150px;
    scroll-snap-align: start;
}
.pcd-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 14px 10px 14px;
    border-radius: 14px;
    border: 1px solid var(--pcd-border);
    background: linear-gradient(180deg, color-mix(in srgb, var(--r) 16%, var(--pcd-card-2)), var(--pcd-card-2) 70%);
    color: var(--pcd-text) !important;
    text-align: center;
    text-decoration: none !important;
    overflow: hidden;
    transition: transform .2s cubic-bezier(.22,1,.36,1), border-color .2s ease, box-shadow .2s ease;
    animation: pcdIn .35s cubic-bezier(.22,1,.36,1) both;
}
.pcd-tile::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--r);
}
.pcd-tile:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--r) 50%, transparent);
    box-shadow: 0 16px 30px -20px color-mix(in srgb, var(--r) 80%, #000);
}
.pcd-tile__rarity {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--r);
}
.pcd-tile__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
}
.pcd-tile__media::before {
    content: "";
    position: absolute;
    inset: 14%;
    border-radius: 50%;
    background: var(--r);
    opacity: .25;
    filter: blur(16px);
}
.pcd-tile__media img,
.pcd-tile__media video {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}
.pcd-tile__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    min-width: 0;
}
.pcd-tile__meta {
    font-size: 11px;
    color: var(--pcd-muted);
}
.pcd-tile__new {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--r);
    color: #111;
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: .06em;
    box-shadow: 0 0 14px -2px var(--r);
}

.pcd-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pcd-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px 10px 8px 13px;
    border-radius: 12px;
    background: var(--pcd-card-2);
    border: 1px solid var(--pcd-border);
    color: var(--pcd-text) !important;
    text-decoration: none !important;
    overflow: hidden;
    transition: border-color .18s ease, background .18s ease;
    animation: pcdIn .35s cubic-bezier(.22,1,.36,1) both;
}
.pcd-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--r);
}
.pcd-row:hover {
    border-color: color-mix(in srgb, var(--r) 45%, transparent);
}
.pcd-row__media {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}
.pcd-row__media img,
.pcd-row__media video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
}
.pcd-row__body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
}
.pcd-row__meta {
    font-size: 11px;
    color: var(--pcd-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pcd-row .pcd-line__sub {
    display: none;
}
.pcd-row__ago {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    color: var(--pcd-muted);
    white-space: nowrap;
}
.pcd--list .pcd__more,
.pcd--tiles .pcd__more,
.pcd--feature .pcd__more {
    width: 100%;
}

@keyframes pcdIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}
@keyframes pcdSpin {
    to { transform: rotate(360deg); }
}

@media (max-width: 575px) {
    .pcd {
        padding: 12px;
    }
    .pcd-last {
        gap: 12px;
        padding: 12px;
    }
    .pcd-last__media {
        width: 64px;
        height: 64px;
    }
    .pcd-last .pcd-line__title {
        font-size: 15px;
    }
    .pcd__list {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pcd * {
        animation: none !important;
        transition: none !important;
    }
}