.pf-pair, .pr-streak { --fire: #ff8c3c; }
.pf-pair.tier-gold, .pr-streak.tier-gold, .pf-pair-chip-n.tier-gold { --fire: #ffb000; }
.pf-pair.tier-pink, .pr-streak.tier-pink, .pf-pair-chip-n.tier-pink { --fire: #ff5fcf; }
.pf-pair.tier-blue, .pr-streak.tier-blue, .pf-pair-chip-n.tier-blue { --fire: #38c6ff; }

.pf-pair { display: flex; flex-direction: column; gap: 6px; scroll-margin-top: 90px; }
.pf-pair-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.pf-pair-avs { display: inline-flex; align-items: center; }
.pf-pair-av { position: relative; display: block; width: 52px; height: 52px; flex-shrink: 0; }
.pf-pair-av + .pf-pair-av { margin-left: -14px; }
.pf-pair-av > img:first-child { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: var(--bg-card); box-shadow: 0 0 0 3px var(--bg-card); }
.pf-pair-deco { position: absolute; top: 50%; left: 50%; width: 124%; height: 124%; transform: translate(-50%, -50%); pointer-events: none; object-fit: contain; }
.pf-pair-fire { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 1.15rem; font-weight: 800; color: var(--white); line-height: 1; }
.pf-pair-fire i { color: var(--fire); font-size: 1rem; }
.pf-pair-lbl { color: var(--text-2); text-shadow: none; }
.pf-pair-names { font-size: .98rem; font-weight: 600; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-pair-names a { color: var(--white); text-decoration: none; }
.pf-pair-names a:hover { text-decoration: underline; }
.pf-pair-dates { display: flex; flex-wrap: wrap; gap: 2px 5px; font-size: .8rem; color: var(--text-2); }
.pf-pair-dates span:not(:last-child)::after, .pr-sub span:not(:last-child)::after { content: ','; }
.pf-pair-track { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px; border-radius: 12px; background: rgba(255,255,255,.03); color: var(--text); text-decoration: none; min-width: 0; transition: background .15s; }
.pf-pair-track:hover { background: rgba(255,255,255,.06); }
.pf-pair-track img, .pf-pair-cover { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.pf-pair-cover, .pr-cover { display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.06); color: var(--text-mute); }
.pf-pair-track-t, .pr-track-t { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.pf-pair-track-t b, .pr-track-t b { font-size: .86rem; font-weight: 600; color: var(--white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-pair-track-t span, .pr-track-t span { font-size: .76rem; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-pair-anniv { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: .84rem; font-weight: 600; color: var(--white); }
.pf-pair-anniv i { color: var(--text-2); }
.pf-pair-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-size: .8rem; }
.pf-pair-links a { color: var(--text-2); text-decoration: none; }
.pf-pair-links a:hover { color: var(--white); }
@media (max-width: 600px) {
    .pf-pair-av { width: 44px; height: 44px; }
    .pf-pair-av + .pf-pair-av { margin-left: -12px; }
}

.pf-pair-chip { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.pf-pair-chip:hover { color: #fff; }
.pf-pair-chip-avs { display: inline-flex; }
.pf-pair-chip-avs img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(0,0,0,.6); }
.pf-pair-chip-avs img + img { margin-left: -6px; }
.pf-pair-chip-n { --fire: #ff8c3c; display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: #fff; }
.pf-pair-chip-n i { color: var(--fire); font-size: .8em; }

.pf-friend-oneway { margin-top: 3px; font-size: .72rem; color: var(--text-mute); text-shadow: none; }

.pf-note-body { display: flex; align-items: flex-start; gap: 14px; }
.pf-note-av { flex-shrink: 0; }
.pf-note-av img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block; }
.pf-note-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pf-note-text { font-size: 1rem; line-height: 1.5; color: var(--white); white-space: pre-line; overflow-wrap: anywhere; }
.pf-note-by { font-size: .8rem; color: var(--text-2); text-decoration: none; align-self: flex-start; }
.pf-note-by:hover { color: var(--white); }
.pf-note-own { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.pf-note-state { font-size: .78rem; color: var(--text-2); margin-right: auto; }

.pair-conf { position: fixed; inset: 0; z-index: 300; pointer-events: none; overflow: hidden; }
.pair-conf i { position: absolute; top: -12px; width: 7px; height: 12px; border-radius: 2px; opacity: .95; animation: pair-fall linear forwards; }
@keyframes pair-fall { to { transform: translate3d(var(--dx), 105vh, 0) rotate(var(--rot)); opacity: .8; } }

.pair-adm-n { padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: .8rem; }
.pair-adm-t { margin: 4px 0; color: var(--white); white-space: pre-line; overflow-wrap: anywhere; }
.pair-adm-log { margin-top: 8px; font-size: .78rem; }
.pair-adm-log summary { cursor: pointer; color: var(--text-2); }
.pair-adm-l { padding: 6px 0; border-bottom: 1px solid var(--border-soft); color: var(--text-2); }
.pair-adm-ban { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: .8rem; }
.pair-adm-ban span { flex-basis: 100%; color: var(--text-2); }