.mx-back { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; }
.mx-page { padding-block: 30px; }
.mx-heading { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.mx-heading h1 { font-size: 26px; line-height: 1.3; }
.mx-badge { color: #bbb; background: #262626; padding: 5px 8px; border-radius: 4px; font-size: 12px; }
.mx-status { margin-top: 14px; color: var(--teal); font-size: 13px; }
.mx-status.stale { color: #9b5c13; }
.mx-controls { display: flex; gap: 14px; align-items: center; margin-top: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.mx-controls .search-box { margin-left: 0; width: 320px; }
.mx-controls select { height: 36px; padding: 0 12px; background: var(--soft); border-radius: 4px; }
#mxCount { margin-left: auto; color: var(--muted); white-space: nowrap; font-size: 13px; }
.mx-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 14px; }
.mx-table .title-col { width: 52%; } .mx-table .type-col { width: 16%; } .mx-table .year-col { width: 12%; } .mx-table .episode-col { width: 20%; }
.mx-table th { font-weight: 500; color: var(--muted); text-align: left; padding: 14px 8px; }
.mx-table td { padding: 14px 8px; border-top: 1px solid var(--line); overflow-wrap: anywhere; vertical-align: top; }
.mx-table td:first-child { font-weight: 600; }.mx-table td:last-child { color: var(--teal); }
.mx-table tr:hover td { background: var(--soft); }
.mx-note { margin-top: 24px; color: var(--muted); font-size: 12px; }
.mx-empty { padding: 48px 0; color: var(--muted); text-align: center; }
.mx-directory { padding-bottom: 0; }
.mx-directory .header-inner { display: flex; flex-wrap: nowrap; min-height: 64px; padding-block: 14px; }
.mx-coverage { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: 24px; padding-block: 18px; border-block: 1px solid var(--line); }
.mx-coverage strong, .mx-coverage span { display: block; }
.mx-coverage strong { font-size: 14px; font-weight: 500; }
.mx-coverage span { color: var(--muted); font-size: 11px; margin-top: 5px; }
@media (max-width: 680px) {
  .mx-page { padding-block: 22px; }.mx-heading h1 { font-size: 22px; }.mx-heading { gap: 12px; }
  .mx-controls { flex-wrap: wrap; gap: 12px; }.mx-controls .search-box { width: 100%; flex: 0 0 100%; }
  .mx-table { font-size: 13px; }.mx-table .year-col, .year-cell { display: none; }
  .mx-table .title-col { width: 52%; }.mx-table .type-col { width: 20%; }.mx-table .episode-col { width: 28%; }
  .mx-table th, .mx-table td { padding: 12px 5px; }.mx-back { font-size: 13px; }
  .mx-coverage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
}