/* Sprite tracker list page */
.sp-list-hero { text-align: center; margin-bottom: 1.75rem; }
.sp-list-hero .sp-page-title { margin-bottom: .5rem; }
.sp-list-sub { color: var(--sp-text-dim); font-family: var(--sp-font-body); font-size: .9rem; margin: 0 auto 1.25rem; max-width: 560px; }

.sp-list-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.sp-list-stat { min-width: 130px; padding: .7rem 1.1rem; border-radius: var(--sp-radius); background: var(--sp-card); border: 1px solid var(--sp-border); text-align: center; }
.sp-list-stat i { color: var(--sp-purple-lt); margin-bottom: .25rem; }
.sp-list-stat strong { display: block; font-family: var(--sp-font-body); font-size: 1.4rem; color: var(--sp-text); }
.sp-list-stat span { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sp-muted); font-family: var(--sp-font-body); }

.sp-list-layout { display: grid; grid-template-columns: 1fr 360px; gap: 1.5rem; align-items: start; }
.sp-list-create { position: sticky; top: 1rem; }
@media (max-width: 900px) {
    .sp-list-layout { grid-template-columns: 1fr; }
    .sp-list-create { position: static; order: -1; }
}

.sp-list-toolbar { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.sp-list-toolbar .sp-search-box { flex: 1; min-width: 180px; }

.sp-lb { display: grid; gap: .6rem; }
.sp-lb-row { display: flex; align-items: center; gap: 1rem; padding: .8rem 1rem; border-radius: 10px; text-decoration: none; color: var(--sp-text); background: rgba(20, 8, 35, .55); border: 1px solid rgba(91, 33, 182, .3); transition: border-color .2s, background .2s; }
.sp-lb-row:hover { border-color: var(--sp-border-hi); background: rgba(126, 34, 206, .12); }
.sp-lb-row.is-mine { border-left: 3px solid var(--sp-purple-md); }
.sp-lb-row.is-complete { border-color: rgba(250, 204, 21, .45); background: linear-gradient(120deg, rgba(250, 204, 21, .05), rgba(250, 204, 21, .1)); }

.sp-lb-rank { flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-family: var(--sp-font-body); font-weight: 700; font-size: .85rem; color: var(--sp-text-dim); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.sp-lb-rank.is-gold { color: #fde68a; border-color: #d4af37; background: rgba(212, 175, 55, .15); }
.sp-lb-rank.is-silver { color: #e5e7eb; border-color: #9ca3af; background: rgba(156, 163, 175, .15); }
.sp-lb-rank.is-bronze { color: #fdba74; border-color: #c2813a; background: rgba(194, 129, 58, .15); }

.sp-lb-main { flex: 1; min-width: 0; }
.sp-lb-name { display: flex; align-items: center; gap: .5rem; font-family: var(--sp-font-body); font-weight: 700; font-size: .92rem; text-transform: uppercase; letter-spacing: .05em; color: #e9d5ff; }
.sp-lb-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-lb-row.is-complete .sp-lb-name { color: #fde68a; }
.sp-lb-tag { flex: none; font-size: .62rem; letter-spacing: .06em; padding: .1rem .45rem; border-radius: 999px; border: 1px solid var(--sp-purple-md); color: var(--sp-purple-lt); }
.sp-lb-crown { flex: none; color: #fcd34d; }

.sp-lb-meta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .25rem; font-size: .74rem; color: var(--sp-text-dim); font-family: var(--sp-font-body); }
.sp-lb-meta i { color: var(--sp-purple-lt); margin-right: .25rem; }
.sp-lb-meta strong { color: var(--sp-text); }

.sp-lb-bar { height: 6px; margin-top: .5rem; border-radius: 3px; background: rgba(91, 33, 182, .25); overflow: hidden; }
.sp-lb-bar > div { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #7e22ce, #c084fc); }
.sp-lb-row.is-complete .sp-lb-bar > div { background: linear-gradient(90deg, #d4a017, #fde047); }

.sp-lb-pct { flex: none; min-width: 56px; text-align: right; font-family: var(--sp-font-body); font-weight: 700; font-size: 1.25rem; color: var(--sp-purple-lt); }
.sp-lb-row.is-complete .sp-lb-pct { color: #fde68a; }
.sp-lb-go { flex: none; color: var(--sp-muted); }

@media (max-width: 560px) {
    .sp-lb-row { flex-wrap: wrap; }
    .sp-lb-go { display: none; }
}