.sagas-view-button {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: .875rem;
    font-weight: 500;
}
.sagas-view-button.is-active { background: var(--color-primary-500); color: var(--color-bg); }
.sagas-filter-chip { display: inline-flex; padding: .375rem .75rem; border: 1px solid var(--color-divider); border-radius: 9999px; background: var(--color-surface); color: var(--color-text-muted); font-size: .75rem; font-weight: 600; }
.sagas-filter-chip:hover, .sagas-filter-chip.is-active { border-color: var(--color-primary-500); background: var(--color-primary-500); color: var(--color-bg); }
.sagas-filter-select { width: 100%; padding: .5rem .75rem; border: 1px solid var(--color-divider); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); font-size: .875rem; }
.sagas-catalog { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1.5rem; }
@media (min-width: 640px) { .sagas-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sagas-catalog { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.saga-catalog-card { overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: var(--color-surface); transition: border-color .2s, box-shadow .2s; }
.saga-catalog-card:hover { border-color: var(--color-primary-500); box-shadow: var(--elev-1); }
.saga-card-poster { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; background: var(--color-bg); }
.saga-card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); }
.saga-card-status, .saga-card-spinoff { position: absolute; top: .75rem; z-index: 2; border: 1px solid var(--color-divider); border-radius: .25rem; background: color-mix(in srgb, var(--color-surface) 88%, transparent); color: var(--color-text); font-size: .75rem; padding: .125rem .5rem; }
.saga-card-status { right: .75rem; }.saga-card-spinoff { left: .75rem; color: var(--color-warning-500); }
.saga-card-content { display: flex; flex: 1; flex-direction: column; justify-content: space-between; gap: 1rem; padding: 1rem; }
.saga-card-title { color: var(--color-text-strong); font-size: 1rem; font-weight: 600; line-height: 1.35; }
.saga-card-title a:hover { color: var(--color-primary-500); }
.saga-card-metrics { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1rem; color: var(--color-text-muted); font-size: .8rem; }
.saga-card-metrics span, .saga-card-universe { display: flex; align-items: center; gap: .35rem; }
.saga-card-universe { margin-top: .65rem; color: var(--color-text-muted); font-size: .8rem; }
.saga-card-genres { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .75rem; }
.saga-card-genres span { padding: .25rem .5rem; border-radius: .25rem; background: color-mix(in srgb, var(--color-bg) 70%, transparent); color: var(--color-text-muted); font-size: .7rem; }
.saga-card-actions { display: flex; gap: .5rem; padding-top: .5rem; }
.saga-primary-link, .saga-secondary-link { display: inline-flex; flex: 1; align-items: center; justify-content: center; padding: .5rem .75rem; border-radius: var(--radius-sm); font-size: .8rem; font-weight: 600; }
.saga-primary-link { background: var(--color-primary-500); color: var(--color-bg); }.saga-secondary-link { border: 1px solid var(--color-divider); color: var(--color-text); }
.sagas-catalog[data-view="list"] { display: flex; flex-direction: column; }
.sagas-catalog[data-view="list"] .saga-catalog-card { display: grid; grid-template-columns: 7rem minmax(0, 1fr); min-height: 10rem; }
.sagas-catalog[data-view="list"] .saga-card-poster { height: 100%; min-height: 10rem; aspect-ratio: auto; }
.sagas-catalog[data-view="list"] .saga-card-content { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.sagas-catalog[data-view="list"] .saga-card-actions { min-width: 10rem; }
@media (max-width: 639px) {
    .sagas-catalog[data-view="list"] .saga-catalog-card { grid-template-columns: 5.5rem minmax(0, 1fr); }
    .sagas-catalog[data-view="list"] .saga-card-content { display: flex; padding: .75rem; }
    .sagas-catalog[data-view="list"] .saga-card-metrics { flex-direction: column; align-items: flex-start; gap: .35rem; }
    .sagas-catalog[data-view="list"] .saga-card-genres, .sagas-catalog[data-view="list"] .saga-card-universe { display: none; }
}
.sagas-page-link { display: inline-flex; min-width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; padding: 0 .75rem; border-radius: .375rem; color: var(--color-text); font-size: .875rem; font-weight: 500; }
.sagas-page-link:hover { background: var(--color-surface); }.sagas-page-link.is-current { min-width: 2.75rem; padding-inline: 1rem; background: var(--color-primary-500); color: var(--color-bg); }
.sagas-back-to-top { position: fixed; right: 1rem; bottom: 1rem; z-index: 40; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; border-radius: 9999px; background: var(--color-primary-500); color: var(--color-bg); box-shadow: var(--elev-2); }
.sagas-back-to-top:not(.hidden) { display: inline-flex; }