@keyframes pf-skel {
    0%   { background-position:   0% 0; }
    100% { background-position: 200% 0; }
}
@keyframes pf-card-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pf-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.pf-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.pf-title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.2px;
    color: var(--text-1, #1a1a1a);
    margin: 0;
}

.pf-summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--surface-2, #fafafa);
    border: 1px solid var(--border-1, #e5e5e5);
    color: var(--text-2, #555);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.pf-summary-avg {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--text-1, #1a1a1a);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.2px;
}
.pf-summary-stars { display: inline-flex; gap: 1.5px; }
.pf-summary-star { display: inline-flex; line-height: 0; }
.pf-summary-star svg {
    width: 12px;
    height: 12px;
    fill: #e1e1e4;
    flex-shrink: 0;
}
.pf-summary-star.is-on svg { fill: #f5a623; }
.pf-summary-star.is-on { animation: pf-summary-star-pop .4s cubic-bezier(.16, 1, .3, 1) backwards; }
@keyframes pf-summary-star-pop {
    from { transform: scale(.3); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
.pf-summary-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--text-3, #c4c4c4);
    flex: none;
}
.pf-summary-count {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-3, #888);
}
@media (prefers-reduced-motion: reduce) {
    .pf-summary-star.is-on { animation: none; }
}

.pf-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 6px;
    margin-right: -6px;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb, #d4d4d4) transparent;
}
.pf-list::-webkit-scrollbar { width: 7px; }
.pf-list::-webkit-scrollbar-track { background: transparent; }
.pf-list::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb, #d4d4d4);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.pf-list::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover, #a8a8a8);
    background-clip: content-box;
}

.pf-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 13px 14px;
    border-radius: 14px;
    background: var(--surface, #fff);
    border: 1px solid var(--border-1, #e5e5e5);
    animation: pf-card-in .45s cubic-bezier(.16, 1, .3, 1) both;
}

.pf-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pf-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--surface-2, #fafafa);
    border: 1px solid var(--border-soft, #ececec);
}

.pf-avatar-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    color: #e01f1f;
    background: rgba(224, 31, 31, 0.10);
    border-color: rgba(224, 31, 31, 0.18);
}

.pf-card-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.pf-author {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-1, #1a1a1a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pf-card-sub {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pf-stars {
    display: inline-flex;
    align-items: center;
    gap: 1px;
}
.pf-stars svg {
    width: 12px;
    height: 12px;
    fill: #f5a623;
}

.pf-date {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-3, #777);
}

.pf-content {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-2, #555);
    margin: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.pf-card-images {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 2px;
}
.pf-card-img {
    appearance: none;
    position: relative;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 1px solid var(--border-1, #e5e5e5);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    background: var(--surface-2, #fafafa);
    flex-shrink: 0;
    transition: transform .28s cubic-bezier(.16, 1, .3, 1),
                border-color .2s ease,
                box-shadow .28s cubic-bezier(.16, 1, .3, 1);
}
.pf-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}
.pf-card-img:hover {
    border-color: rgba(224, 31, 31, 0.32);
    box-shadow: 0 8px 18px -10px rgba(224, 31, 31, 0.4);
}
.pf-card-img:hover img { transform: scale(1.08); }
.pf-card-img:active { transform: scale(.96); }
.pf-card-img:focus-visible {
    outline: 2px solid #e01f1f;
    outline-offset: 2px;
}
.pf-card-img-more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 8, 12, 0.55);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -.2px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
[data-theme="dark"] .pf-card-img {
    border-color: var(--border-1, rgba(255, 255, 255, 0.10));
    background: var(--surface-2, #1f1f1f);
}
[data-theme="dark"] .pf-card-img:hover {
    border-color: rgba(255, 99, 99, 0.4);
    box-shadow: 0 8px 18px -10px rgba(255, 99, 99, 0.4);
}

.pf-lightbox {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity .22s cubic-bezier(.16, 1, .3, 1);
}
.pf-lightbox[hidden] { display: none; }
.pf-lightbox.is-open { opacity: 1; }
.pf-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 6, 10, .78);
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    transition: backdrop-filter .28s cubic-bezier(.16, 1, .3, 1),
                -webkit-backdrop-filter .28s cubic-bezier(.16, 1, .3, 1);
}
.pf-lightbox.is-open .pf-lightbox-backdrop {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.pf-lightbox-stage {
    position: relative;
    max-width: min(92vw, 720px);
    max-height: 86vh;
    display: flex;
    transform: translateY(12px) scale(.96);
    transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
.pf-lightbox.is-open .pf-lightbox-stage { transform: none; }
.pf-lightbox-img {
    max-width: 100%;
    max-height: 86vh;
    border-radius: 14px;
    object-fit: contain;
    box-shadow: 0 32px 80px -24px rgba(0, 0, 0, .7);
    background: #0c0c0e;
}
.pf-lightbox-close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 0;
    background: #fff;
    color: #1a1a1a;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .5);
    transition: transform .18s cubic-bezier(.16, 1, .3, 1), background .15s ease, color .15s ease;
}
.pf-lightbox-close svg { width: 16px; height: 16px; display: block; }
.pf-lightbox-close:hover {
    transform: rotate(90deg);
    background: #e01f1f;
    color: #fff;
}
@media (max-width: 560px) {
    .pf-lightbox { padding: 16px; }
    .pf-lightbox-close { top: 8px; right: 8px; width: 34px; height: 34px; }
}
body.pf-lb-lock { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
    .pf-card-img,
    .pf-card-img img,
    .pf-lightbox,
    .pf-lightbox-stage,
    .pf-lightbox-backdrop { transition: none; }
    .pf-card-img:hover img { transform: none; }
}

.pf-seeall {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    color: #f5a623;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: color .2s ease;
}
.pf-seeall svg {
    width: 14px;
    height: 14px;
    transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}
.pf-seeall:hover { color: #d98b12; }
.pf-seeall:hover svg { transform: translateX(3px); }

.pf-empty {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 24px 16px;
    border-radius: 14px;
    background: var(--surface-2, #fafafa);
    border: 1px dashed var(--border-1, #e5e5e5);
    text-align: center;
}
.pf-empty strong {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--text-1, #1a1a1a);
}
.pf-empty span {
    font-size: 12.5px;
    color: var(--text-3, #777);
}
.pf-empty-rich { gap: 9px; padding: 26px 18px; align-items: center; }
.pf-empty .pf-empty-ico {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(224, 31, 31, .1);
    color: #e01f1f;
    margin-bottom: 2px;
}
.pf-empty-ico svg { width: 24px; height: 24px; }
.pf-empty-rich strong { font-size: 14.5px; }
.pf-empty-sub { line-height: 1.5; max-width: 280px; }
.pf-empty-trust {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    text-align: left;
}
.pf-empty-trust li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2, #555);
}
.pf-empty-trust svg { width: 15px; height: 15px; color: #2dc56e; flex: none; }
[data-theme="dark"] .pf-empty .pf-empty-ico { background: rgba(255, 107, 107, .16); color: #ff6b6b; }
[data-theme="dark"] .pf-empty-trust li { color: var(--text-2, #c9c9d1); }

.pf-skel {
    background: linear-gradient(90deg,
        var(--surface-2, #f4f4f4) 0%,
        rgba(0, 0, 0, .06) 50%,
        var(--surface-2, #f4f4f4) 100%);
    background-size: 200% 100%;
    animation: pf-skel 1.2s linear infinite;
    border-radius: 8px;
}
[data-theme="dark"] .pf-skel {
    background: linear-gradient(90deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%);
    background-size: 200% 100%;
}

.pf-skel-line {
    height: 13px;
    border-radius: 6px;
}

.pf-card-skel {
    flex-direction: row;
    align-items: flex-start;
    gap: 11px;
    animation: none;
}
.pf-card-skel .pf-avatar {
    border: none;
    flex-shrink: 0;
}
.pf-skel-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

[data-theme="dark"] .pf-summary {
    background: var(--surface-2, #1f1f1f);
    border-color: var(--border-1, rgba(255, 255, 255, 0.10));
    color: var(--text-2, #aaaaaa);
}
[data-theme="dark"] .pf-summary-star svg { fill: #3a3a3c; }
[data-theme="dark"] .pf-summary-star.is-on svg { fill: #f5a623; }
[data-theme="dark"] .pf-summary-dot { background: var(--text-3, #555); }
[data-theme="dark"] .pf-card {
    background: var(--surface-2, #1f1f1f);
    border-color: var(--border-1, rgba(255, 255, 255, 0.10));
}
[data-theme="dark"] .pf-avatar-letter {
    color: #e54848;
    background: rgba(224, 31, 31, 0.14);
    border-color: rgba(224, 31, 31, 0.22);
}
[data-theme="dark"] .pf-seeall { color: #f5b943; }
[data-theme="dark"] .pf-seeall:hover { color: #ffcf5c; }
[data-theme="dark"] .pf-empty {
    background: var(--surface-2, #1f1f1f);
    border-color: var(--border-1, rgba(255, 255, 255, 0.10));
}

.pf-hero {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "score dist" "rec rec";
    gap: 13px 16px;
    align-items: center;
    padding: 15px 16px;
    margin-bottom: 14px;
    border-radius: 16px;
    overflow: hidden;
    background:
        radial-gradient(130% 150% at 0% 0%, rgba(245, 166, 35, .13), transparent 58%),
        var(--surface-2, #fafafa);
    border: 1px solid var(--border-1, #e8e8e8);
}
.pf-hero-glow {
    position: absolute;
    top: -55%;
    left: -12%;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 166, 35, .38), transparent 70%);
    filter: blur(18px);
    pointer-events: none;
    animation: pf-hero-glow-pulse 4.5s cubic-bezier(.4, 0, .6, 1) infinite;
}
@keyframes pf-hero-glow-pulse {
    0%, 100% { opacity: .5; transform: scale(1); }
    50% { opacity: .95; transform: scale(1.14); }
}
.pf-hero-score {
    grid-area: score;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 88px;
}
.pf-hero-avg {
    font-size: 40px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -1.5px;
    color: var(--text-1, #1a1a1a);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 18px rgba(245, 166, 35, .3);
}
.pf-hero-stars { display: inline-flex; gap: 1px; margin-top: 6px; }
.pf-hero-star { display: inline-flex; line-height: 0; }
.pf-hero-star svg { width: 14px; height: 14px; fill: #e1e1e4; }
.pf-hero-star.is-on svg { fill: #f5a623; }
.pf-hero-star.is-on { animation: pf-star-pop .45s cubic-bezier(.16, 1, .3, 1) backwards; }
@keyframes pf-star-pop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.pf-hero-count { margin-top: 6px; font-size: 10.5px; font-weight: 700; color: var(--text-3, #999); }
.pf-hero-dist {
    grid-area: dist;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
}
.pf-dist-row { display: flex; align-items: center; gap: 8px; }
.pf-dist-label {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    width: 24px;
    flex: none;
    font-size: 10.5px;
    font-weight: 800;
    color: var(--text-3, #999);
}
.pf-dist-label svg { width: 9px; height: 9px; fill: #f5a623; }
.pf-dist-track {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: var(--border-1, #eaeaea);
    overflow: hidden;
}
.pf-dist-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #f5a623, #ffce5c);
    box-shadow: 0 0 8px rgba(245, 166, 35, .55);
    transform-origin: left;
    animation: pf-dist-grow .7s cubic-bezier(.16, 1, .3, 1) backwards;
}
@keyframes pf-dist-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pf-dist-n {
    width: 18px;
    flex: none;
    text-align: right;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-3, #aaa);
    font-variant-numeric: tabular-nums;
}
.pf-hero-rec {
    grid-area: rec;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(45, 197, 110, .12);
    border: 1px solid rgba(45, 197, 110, .28);
    color: #1f9d57;
    font-size: 12px;
    font-weight: 700;
}
.pf-hero-rec svg { width: 14px; height: 14px; }
.pf-hero-rec strong { font-weight: 900; }

.pf-verified {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 4px;
    color: #2dc56e;
}
.pf-verified svg { width: 14px; height: 14px; display: block; }

.pf-card { transition: border-color .22s ease, box-shadow .25s ease, transform .25s cubic-bezier(.16, 1, .3, 1); }
.pf-card:hover {
    transform: translateY(-2px);
    border-color: rgba(245, 166, 35, .38);
    box-shadow: 0 14px 30px -20px rgba(245, 166, 35, .45);
}
.pf-card-foot { display: flex; align-items: center; margin-top: 2px; }
.pf-like {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid var(--border-1, #e5e5e5);
    background: var(--surface, #fff);
    color: var(--text-3, #888);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .2s, color .2s, background .2s, transform .18s cubic-bezier(.16, 1, .3, 1);
}
.pf-like svg { width: 14px; height: 14px; transition: transform .2s cubic-bezier(.16, 1, .3, 1); }
.pf-like:hover { border-color: rgba(245, 166, 35, .5); color: #d98b12; transform: translateY(-1px); }
.pf-like.is-liked { background: rgba(245, 166, 35, .12); border-color: rgba(245, 166, 35, .42); color: #d98b12; }
.pf-like.is-liked svg { fill: #f5a623; stroke: #f5a623; }
.pf-like-count { font-variant-numeric: tabular-nums; }
.pf-like-pop svg { animation: pf-like-bump .45s cubic-bezier(.16, 1, .3, 1); }
@keyframes pf-like-bump {
    30% { transform: scale(1.35) rotate(-8deg); }
    60% { transform: scale(.92); }
    100% { transform: scale(1); }
}

[data-theme="dark"] .pf-hero {
    background:
        radial-gradient(130% 150% at 0% 0%, rgba(245, 166, 35, .17), transparent 58%),
        var(--surface-2, #1c1c1f);
    border-color: var(--border-1, rgba(255, 255, 255, .08));
}
[data-theme="dark"] .pf-hero-star svg { fill: #3a3a3c; }
[data-theme="dark"] .pf-hero-star.is-on svg { fill: #f5a623; }
[data-theme="dark"] .pf-dist-track { background: rgba(255, 255, 255, .09); }
[data-theme="dark"] .pf-hero-rec { background: rgba(45, 197, 110, .14); border-color: rgba(45, 197, 110, .3); color: #4bd67f; }
[data-theme="dark"] .pf-card:hover { border-color: rgba(245, 166, 35, .4); box-shadow: 0 14px 30px -20px rgba(0, 0, 0, .7); }
[data-theme="dark"] .pf-like {
    background: var(--surface, #18181c);
    border-color: var(--border-1, rgba(255, 255, 255, .1));
    color: var(--text-3, #999);
}
[data-theme="dark"] .pf-like:hover { color: #ffcf5c; border-color: rgba(245, 166, 35, .5); }
[data-theme="dark"] .pf-like.is-liked { background: rgba(245, 166, 35, .16); border-color: rgba(245, 166, 35, .42); color: #ffcf5c; }

@media (prefers-reduced-motion: reduce) {
    .pf-hero-glow, .pf-hero-star.is-on, .pf-dist-fill, .pf-like-pop svg { animation: none; }
    .pf-card, .pf-card:hover { transition: none; transform: none; }
}