.mod-card__game {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  font: .7rem/1.4 var(--font-mono);
  letter-spacing: .06em;
  color: var(--muted);
}

.mod-card__game .icon {
  width: 13px;
  height: 13px;
  color: var(--ok);
}

.mod-card__game--old .icon {
  color: var(--warn);
}

.mod-card__game--old span + span {
  color: var(--warn);
}

.game-check {
  display: block;
  margin-top: 4px;
  font-size: .8rem;
  color: var(--muted);
}

.game-check--old {
  color: var(--warn);
}

.game-check a {
  color: inherit;
}

.mods-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  align-items: center;
  justify-content: space-between;
  margin-top: 28px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  background: var(--panel);
}

.mods-tools p {
  margin: 0;
  color: var(--text-2);
  font-size: .93rem;
}

.mods-tools strong {
  display: block;
  color: var(--text);
}

.watch__body > * + * {
  margin-top: 12px;
}

.watch__text {
  margin: 0;
  font-size: .9rem;
  color: var(--text-2);
}

.watch__text .tag {
  margin-left: 4px;
  vertical-align: middle;
}

.watch__form > * + * {
  margin-top: 10px;
}

.watch--on {
  border-color: rgba(95, 224, 138, .28);
}

.issues {
  scroll-margin-top: calc(var(--topbar) + 20px);
}

.issues .h-section .tag {
  font-size: .66rem;
}

.issues__lead {
  margin: -8px 0 16px;
  color: var(--muted);
  font-size: .9rem;
}

.issues__none {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px 16px;
  border: 1px dashed var(--line-2);
  color: var(--text-2);
  font-size: .93rem;
}

.issues__none .icon {
  color: var(--ok);
}

.issue-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.issue {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--signal);
  background: var(--panel);
}

.issue--progress {
  border-left-color: var(--info);
}

.issue--fixed {
  border-left-color: var(--ok);
  background: rgba(14, 19, 25, .6);
}

.issue__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.issue__title {
  flex: 1 1 260px;
  margin: 0;
  font-size: 1rem;
  font-weight: 620;
  color: var(--text);
}

.issue--fixed .issue__title {
  color: var(--text-2);
}

.issue__since {
  font: .7rem var(--font-mono);
  letter-spacing: .08em;
  color: var(--muted);
}

.issue__fix {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px 14px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

.issue__label {
  font: .68rem/1.9 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan);
}

.issue__fix .prose > :last-child {
  margin-bottom: 0;
}

.issues__old {
  margin-bottom: 14px;
}

.issues__old .issue-list {
  padding: 0 14px 14px;
  margin: 0;
}

.issue-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.issue-hint[hidden] {
  display: none;
}

.issue-hint .icon {
  color: var(--cyan);
}

.issue-hint__lead {
  color: var(--text-2);
}

.pack {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 28px;
  align-items: start;
}

.pack__out[aria-busy="true"] {
  opacity: .7;
  transition: opacity .2s;
}

.pack__list {
  display: grid;
  gap: 18px;
  max-height: min(64vh, 720px);
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-3) transparent;
}

.pack__cat {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.pack__cat legend {
  margin-bottom: 8px;
  padding: 0;
  font: .68rem var(--font-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--signal);
}

.pack__item {
  align-items: center;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-bottom-color: var(--line);
  transition: background .15s, border-color .15s;
}

.pack__item:hover {
  background: rgba(255, 255, 255, .02);
}

.pack__item:has(input:checked) {
  border-color: rgba(255, 138, 31, .35);
  background: var(--signal-dim);
}

.pack__item[hidden] {
  display: none;
}

.pack__name {
  flex: 1;
  min-width: 0;
  color: var(--text);
}

.pack__item .tag {
  font-size: .62rem;
}

.pack__group + .pack__group {
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.pack__group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: .98rem;
}

.pack__group-title .icon {
  color: var(--signal);
}

.pack__group--server .pack__group-title .icon {
  color: var(--warn);
}

.pack__group--client .pack__group-title .icon {
  color: var(--info);
}

.pack__group-title .mono {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 400;
}

.pack__group-sub {
  margin: 2px 0 10px;
  color: var(--muted);
  font-size: .85rem;
}

.pack__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.pack__row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .18);
}

.pack__row-main {
  min-width: 0;
  flex: 1;
}

.pack__row-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-weight: 620;
}

.pack__row-title a {
  color: var(--text);
  text-decoration: none;
}

.pack__row-title a:hover {
  color: var(--signal-2);
}

.pack__row-title .mono {
  font-size: .75rem;
  font-weight: 400;
  color: var(--signal-2);
}

.pack__flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.pack__flags .tag {
  font-size: .62rem;
  height: 22px;
}

.pack__flags .icon {
  width: 12px;
  height: 12px;
}

.pack__note {
  margin: 6px 0 0;
  font-size: .86rem;
  color: var(--text-2);
}

.pack__note--muted {
  color: var(--muted);
}

.pack__facts {
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
}

.pack__req,
.pack__line {
  display: block;
}

.pack__suggest {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.pack__suggest .pack__rows {
  margin-top: 10px;
}

.pack__copyrow {
  display: flex;
  gap: 8px;
}

.pack__copyrow .input {
  flex: 1;
  min-width: 0;
}

.pack__text {
  font-size: .8rem;
  min-height: 160px;
}

.watch-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.watch-list__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}

.watch-list__row:last-child {
  border-bottom: 0;
}

.watch-list__main {
  flex: 1 1 220px;
  min-width: 0;
}

.watch-list__name {
  display: block;
  font-weight: 620;
  color: var(--text);
  text-decoration: none;
}

a.watch-list__name:hover {
  color: var(--signal-2);
}

.watch-list__meta {
  font-size: .8rem;
  color: var(--muted);
}

@media (max-width: 980px) {
  .pack {
    grid-template-columns: minmax(0, 1fr);
  }

  .pack__list {
    max-height: 52vh;
  }
}

@media (max-width: 640px) {
  .pack__row {
    flex-direction: column;
  }

  .pack__copyrow {
    flex-direction: column;
  }

  .issue__fix {
    grid-template-columns: minmax(0, 1fr);
  }
}