.btn.sm { padding: 9px 16px; font-size: .85rem; border-radius: 10px; }
.btn.off { opacity: .5; pointer-events: none; }
.authbox { display: flex; gap: 8px; align-items: center; }
.chip.user { gap: 8px; padding: 4px 12px 4px 6px; color: var(--text); }
.announce { position: fixed; top: 0; left: 0; right: 0; z-index: 150; text-align: center; padding: 6px 12px; font-size: .8rem; background: linear-gradient(90deg, #7c3aed, #0891b2); }
.pv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pv { padding: 22px; display: grid; gap: 12px; align-content: start; transition: transform .3s, border-color .3s; }
.pv:hover { transform: translateY(-6px); border-color: rgba(34,211,238,.5); }
.pv p { color: var(--muted); font-size: .9rem; }
.pill { font: .7rem var(--mono); padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--cyan); justify-self: start; }
.pv-art { height: 130px; border-radius: 14px; background: linear-gradient(135deg, #1a1240, #0b0720); border: 1px solid var(--line); position: relative; overflow: hidden; display: flex; gap: 8px; padding: 12px; align-items: end; }
.pv-tv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: stretch; }
.pv-tv i { border-radius: 8px; background: linear-gradient(135deg, #7c3aed, #0891b2); opacity: .8; animation: pvp 3s ease-in-out infinite; }
.pv-tv i:nth-child(2n) { background: linear-gradient(135deg, #be185d, #7c3aed); animation-delay: -1s; } .pv-tv i:nth-child(3n) { animation-delay: -2s; }
@keyframes pvp { 50% { opacity: .35; } }
.pv-mv i { flex: 1; height: 100%; border-radius: 8px; background: linear-gradient(160deg, hsl(var(--h),80%,45%), hsl(calc(var(--h) + 60),80%,12%)); box-shadow: 0 6px 18px rgba(0,0,0,.4); transform: translateY(8px) rotate(-3deg); transition: transform .3s; }
.pv-mv i:nth-child(even) { transform: translateY(-4px) rotate(3deg); }
.pv:hover .pv-mv i { transform: none; }
.pv-lb { background: linear-gradient(#0b0720, #170f35); } .pv-lb i { width: 30px; height: 44px; border-radius: 6px 6px 0 0; background: #7c3aed; align-self: start; box-shadow: 0 0 14px #7c3aed; }
.pv-lb i:nth-child(2) { background: #0891b2; box-shadow: 0 0 14px #22d3ee; } .pv-lb i:nth-child(3) { background: #be185d; box-shadow: 0 0 14px #e879f9; } .pv-lb i:nth-child(4) { background: #ca8a04; box-shadow: 0 0 14px #fbbf24; }
.pv-lb b { position: absolute; bottom: 14px; width: 18px; height: 22px; border-radius: 8px; background: #a3e635; animation: walk 4s ease-in-out infinite alternate; }
.pv-lb b:nth-of-type(2) { background: #f87171; bottom: 30px; animation-duration: 5s; animation-direction: alternate-reverse; }
@keyframes walk { from { left: 12%; } to { left: 78%; } }
.pv-rk i { flex: 1; border-radius: 6px 6px 0 0; background: var(--grad); } .pv-rk i:nth-child(1) { height: 50%; } .pv-rk i:nth-child(2) { height: 80%; } .pv-rk i:nth-child(3) { height: 100%; } .pv-rk i:nth-child(4) { height: 66%; } .pv-rk i:nth-child(5) { height: 40%; }
.final { max-width: 900px; margin: 40px auto 20px; padding: 50px 24px; text-align: center; display: grid; gap: 14px; justify-items: center; background: radial-gradient(500px 200px at 50% 0, rgba(139,92,246,.3), transparent), var(--card); }
@media (max-width: 1050px) { .pv-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .pv-grid { grid-template-columns: 1fr; } .authbox .btn.ghost { display: none; } }