/* Rocola QR · página pública (participantes) */
.page { max-width: 460px; margin: 0 auto; padding: 1.25rem 1rem 2.5rem; display: flex; flex-direction: column; gap: 1rem; }
.brand { display: flex; align-items: center; justify-content: center; font-weight: 700; letter-spacing: .02em; color: var(--muted); padding-top: .5rem; }

.landing { min-height: 100dvh; justify-content: center; text-align: center; }
.landing .lead { color: var(--muted); }
.admin-link { color: var(--muted); font-size: .85rem; margin-top: 1.5rem; }

.card.center { display: flex; flex-direction: column; gap: .8rem; align-items: center; padding: 2rem 1.25rem; }

.cover-wrap { margin: 0 auto 1.1rem; width: 100%; max-width: 340px; aspect-ratio: 1; animation: pop .45s ease both; }
.cover { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); box-shadow: 0 18px 50px rgba(0, 0, 0, .6), 0 0 60px rgba(139, 92, 246, .25); background: var(--surface-2); }
.cover-ph { display: grid; place-items: center; background: linear-gradient(135deg, #2b1f55, #123a37); color: rgba(255, 255, 255, .6); }
@keyframes pop { from { transform: scale(.94); opacity: 0; } }

.title { text-align: center; font-size: 1.55rem; }
.artist { text-align: center; color: var(--accent-2); font-weight: 600; margin-top: .2rem; }
.album { text-align: center; color: var(--muted); font-size: .9rem; margin-top: .1rem; }
.card .btn-big { margin-top: 1.3rem; }
.hint { text-align: center; color: var(--muted); font-size: .85rem; margin-top: .8rem; }

.result { display: flex; gap: .75rem; align-items: flex-start; margin-top: 1rem; padding: .9rem 1rem; border-radius: var(--radius-sm); animation: rise .3s ease; }
.result p { color: var(--muted); font-size: .92rem; margin-top: .15rem; }
.result.ok { background: rgba(34, 211, 166, .1); border: 1px solid rgba(34, 211, 166, .4); color: var(--green); }
.result.ok p { color: #b7f5e6; }
.result.bad { background: rgba(244, 63, 94, .1); border: 1px solid rgba(244, 63, 94, .4); }
.result.bad p { color: #ffd0d8; }

.strip { display: flex; align-items: center; gap: .8rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .7rem 1rem; }
.strip-text { min-width: 0; display: flex; flex-direction: column; }
.strip-text small { color: var(--green); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; }
.strip-text span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.eq { display: inline-flex; gap: 3px; align-items: flex-end; height: 18px; }
.eq i { width: 4px; background: var(--green); border-radius: 2px; animation: bar 1s ease-in-out infinite; height: 100%; transform-origin: bottom; }
.eq i:nth-child(2) { animation-delay: .2s; }
.eq i:nth-child(3) { animation-delay: .4s; }
.eq.paused i { animation-play-state: paused; transform: scaleY(.35); background: var(--muted); }
@keyframes bar { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

.mine h2 { margin-bottom: .5rem; color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; }
.mine ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.mine li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .65rem .9rem; }
.mine-text { display: flex; flex-direction: column; min-width: 0; }
.mine-text strong, .mine-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mine-text small { color: var(--muted); }
.chip-live { color: var(--green); border-color: rgba(34, 211, 166, .5); }