.rack-count { color: var(--accent); font-size: 12px; font-weight: 800; vertical-align: middle; }
.rack-meta { margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rack-meta > span { min-width: 68px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.025); }
.rack-meta small { color: var(--muted); font-size: 7px; font-weight: 850; letter-spacing: .12em; }
.rack-meta b { color: var(--text); font-size: 13px; }
.rack-meta p { flex: 1; min-width: 220px; margin: 0 0 0 4px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.card-source { position: absolute; top: 7px; right: 8px; color: rgba(255,255,255,.42); font-size: 6px; font-weight: 850; letter-spacing: .12em; }
.consume-note { margin: 2px 12px 7px; padding: 8px 10px; border: 1px solid rgba(255,190,91,.16); border-radius: 9px; background: rgba(255,190,91,.05); color: var(--muted); font-size: 9px; line-height: 1.4; }
.consume-note strong { color: var(--accent); }
.rack-empty { grid-column: 1 / -1; min-height: 110px; display: grid; place-items: center; align-content: center; gap: 5px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); }
.rack-empty strong { color: var(--text); font-size: 12px; }
.rack-empty span { font-size: 9px; }
.empty-detail { min-height: 310px; display: grid; place-items: center; background: var(--panel); }
.empty-detail-inner { max-width: 260px; padding: 30px; text-align: center; }
.empty-detail-inner > span { display: grid; place-items: center; width: 80px; height: 80px; margin: 0 auto 16px; border: 1px dashed var(--line); border-radius: 50%; color: var(--muted); font: 700 30px/1 Georgia, serif; }
.empty-detail-inner p { color: var(--muted); font-size: 10px; line-height: 1.5; }
@media (max-width: 680px) {
  .rack-meta p { flex-basis: 100%; margin: 2px 0 0; }
  .rack-meta > span { flex: 1; }
}