.retro-border {
    box-shadow: 0 0 15px rgba(147, 51, 234, 0.3);
}

.tab-btn.tab-active {
    border-color: #a855f7;
    color: #f3e8ff;
    background-color: rgba(147, 51, 234, 0.1);
}

.status-pill-compatible   { color: #34d399; border-color: #065f46; }
.status-pill-parcial      { color: #fbbf24; border-color: #78350f; }
.status-pill-incompatible { color: #f87171; border-color: #7f1d1d; }

.az-btn.az-active {
    border-color: #a855f7 !important;
    color: #d8b4fe !important;
}

.game-row {
    background-color: #111827;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border: 1px solid #1f2937;
}

/* v0.2.0 — UX: jerarquía visual, paneles y biblioteca */
body { background-image: radial-gradient(circle at 50% -20%, rgba(126,34,206,.10), transparent 35%); }
.library-hero { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.25rem; border:1px solid #1f2937; border-radius:1rem; background:linear-gradient(135deg,rgba(17,24,39,.96),rgba(17,24,39,.72)); }
.eyebrow { font-size:.68rem; letter-spacing:.14em; color:#a78bfa; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.primary-action { border:1px solid #a855f7; background:rgba(126,34,206,.22); color:#f3e8ff; border-radius:.65rem; padding:.65rem 1rem; font-size:.85rem; font-weight:700; white-space:nowrap; }
.primary-action:hover { background:rgba(126,34,206,.35); }
.primary-action:disabled { opacity:.45; cursor:not-allowed; }
.panel-card { background:#111827; border:1px solid #1f2937; border-radius:.8rem; padding:1rem; }
.panel-title { font-size:.78rem; font-weight:700; color:#d1d5db; margin-bottom:.6rem; text-transform:uppercase; letter-spacing:.06em; }
.library-row { display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0; font-size:.78rem; }
.progress-indeterminate { width:35%; animation:retroScan 1.25s ease-in-out infinite alternate; }
@keyframes retroScan { from { transform:translateX(-10%); } to { transform:translateX(190%); } }
@media(max-width:640px){ .library-hero{align-items:flex-start;flex-direction:column}.primary-action{width:100%}.game-row{align-items:flex-start;flex-direction:column} }