#modal .modal { max-width: 760px; }
#modal .modal-body { min-height: 0; }
#modal .cache-info { text-align: left; line-height: 1.6; padding: 0 0 16px; }
#modal .version-bundle { margin: 8px 0; }
#modal .version-item { width: 100%; color: var(--text-primary); text-align: left; gap: 14px; }
#modal .version-item:hover { transform: none; }
#modal .version-description { display: flex; flex: 1; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; min-width: 0; }
#modal .version-number { overflow-wrap: anywhere; }
#modal .version-date { color: var(--text-secondary); font-family: 'Space Grotesk', sans-serif; font-size: 0.8rem; font-weight: 400; white-space: nowrap; }
#modal .version-date-missing { color: var(--text-muted); white-space: normal; }
#modal .version-badge { flex-shrink: 0; }
#modal .ccnl-card {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: -7px; padding: 14px 20px; border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: rgba(251, 191, 36, 0.045);
  color: var(--text-primary); text-decoration: none; font-size: 0.85rem;
}
#modal .version-bundle:has(.ccnl-card) .version-item { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
#modal .ccnl-card:only-child { margin-top: 0; border-radius: var(--radius-sm); }
#modal .ccnl-card:hover { background: rgba(251, 191, 36, 0.085); border-color: #fbbf24; }
#modal .ccnl-card-title { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-weight: 500; }
#modal .badge-ccnl { border: 1px solid rgba(251, 191, 36, 0.45); color: #fbbf24; background: rgba(251, 191, 36, 0.08); }
#modal .ccnl-open { color: #fbbf24; white-space: nowrap; font-size: 0.75rem; }
#modal .year-description { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
#modal .year-range { color: var(--text-secondary); font-size: 0.75rem; font-weight: 400; }
#modal .year-header.active .year-range { color: rgba(255, 255, 255, 0.9); }
#modal .year-header { gap: 16px; }
#modal .year-header .badge { flex-shrink: 0; text-align: right; line-height: 1.6; }
#modal button:focus-visible, #modal a:focus-visible { outline: 3px solid var(--accent-primary); outline-offset: 3px; }
@media (max-width: 520px) {
  #modal { padding: 10px; }
  #modal .modal-header, #modal .modal-body { padding: 18px; }
  #modal .filter-tabs { gap: 8px; }
  #modal .filter-tab { padding: 11px 13px; }
  #modal .refresh-btn { margin-left: 0; }
  #modal .year-header { padding: 14px; gap: 10px; }
  #modal .year-header .badge { padding: 5px 8px; font-size: 0.7rem; }
  #modal .version-item, #modal .ccnl-card { padding: 14px; gap: 8px; }
  #modal .version-description { gap: 7px; }
  #modal .version-date { flex-basis: 100%; font-size: 0.75rem; }
  #modal .version-badge { padding: 5px 7px; }
  #modal .version-item { font-size: 0.8rem; }
  #modal .ccnl-card { align-items: flex-start; }
  #modal .ccnl-open { padding-top: 5px; }
}