/* Collection controls form a shared footer, leaving the mod image unobstructed. */
.ac-card-column.ac-card-has-tools { flex-direction: column; }
.ac-card-column.ac-card-has-tools > a.ac-mod-card {
  flex: 1;
  height: auto;
  margin-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.ac-card-tools {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
  padding: 9px 12px 12px;
  margin-bottom: 28px;
  border: 1px solid #2d3947;
  border-top: 0;
  border-radius: 0 0 16px 16px;
  background: #141e28;
}
.ac-related-grid .ac-card-tools { margin-bottom: 0; }
.ac-card-tools > :is(a, button) {
  position: static;
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto;
  min-width: 0;
  min-height: 44px;
  max-width: 100%;
  margin: 0;
  padding: 9px 10px;
  border: 1px solid #53606d;
  border-radius: 8px;
  background: #192530;
  color: #cbd5df;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s, border-color .16s, color .16s;
}
.ac-card-tools > :is(a, button) .ac-icon { width: 17px; height: 17px; flex: 0 0 17px; }
.ac-card-tools > :is(a, button):hover { background: #30232d; border-color: #a74855; color: #fff; }
.ac-card-tools > [aria-pressed="true"],
.ac-card-tools > [data-garage-saved="true"] { border-color: #ad4351; background: #38212b; color: #f2c1c8; }

/* A comparison remains apparent after the pointer leaves the card. */
.ac-card-column.ac-card-is-compared > a.top-mods-block.ac-mod-card,
.ac-archive-top .ac-card-column.ac-card-is-compared > a.top-mods-block.ac-mod-card {
  border-color: #db0e15;
}
.ac-card-column.ac-card-is-compared > .ac-card-tools { border-color: #db0e15; }

.ac-garage-detail,
.ac-garage-primary,
.ac-garage-secondary,
.ac-garage-item-actions > :is(a, button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  max-width: 100%;
  padding: 11px 16px;
  border: 1px solid #8d3d49;
  border-radius: 9px;
  background: #34212b;
  color: #f1ced5;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s, border-color .16s, color .16s;
}
:is(.ac-garage-detail, .ac-garage-primary):hover { background: #492630; border-color: #c14653; color: #fff; }
.ac-garage-secondary,
.ac-garage-item-actions > :is(a, button) { border-color: #465364; background: #1a2733; color: #c5d1de; }
.ac-garage-secondary:hover,
.ac-garage-item-actions > :is(a, button):hover { border-color: #95616b; background: #2c2732; color: #fff; }
.ac-garage-detail { width: 100%; margin-top: 12px; }
.ac-garage-detail[data-garage-saved="true"] { border-color: #b04b58; color: #f4c1c9; }
.ac-garage-modal :disabled { opacity: .5; cursor: not-allowed; }

.ac-garage-page .ac-garage-main { padding: 34px 0 60px; }
.ac-garage-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-bottom: 28px; }
.ac-garage-heading > div { flex: 1 1 380px; min-width: 0; }
.ac-garage-heading h1 { margin: 0 0 12px; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.2; }
.ac-garage-heading p { max-width: 760px; margin: 0; color: #a8b7c7; font-size: 16px; line-height: 1.7; }
.ac-garage-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 30px 0; }
.ac-garage-benefits > article,
.ac-garage-summary > *,
.ac-garage-empty,
.ac-garage-guest-cta,
.ac-garage-item {
  min-width: 0;
  border: 1px solid #2d3a48;
  border-radius: 16px;
  background: linear-gradient(145deg, #18232f, #131d27);
}
.ac-garage-benefits > article { padding: 25px; }
.ac-garage-benefits > article > .ac-icon { width: 30px; height: 30px; margin-bottom: 20px; color: #cf8b96; }
.ac-garage-benefits h2 { margin: 0 0 12px; font-size: 24px; line-height: 1.3; }
.ac-garage-benefits p { margin: 0; color: #a3b2c3; font-size: 15px; line-height: 1.75; }
.ac-garage-guest-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; padding: 28px; }
.ac-garage-guest-cta > div { flex: 1 1 460px; min-width: 0; }
.ac-garage-guest-cta h2 { font-size: 26px; margin-bottom: 12px; }
.ac-garage-guest-cta p { max-width: 740px; margin-bottom: 20px; color: #a5b5c7; font-size: 16px; line-height: 1.75; }
.ac-garage-summary { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 26px; }
.ac-garage-summary > * { padding: 20px; }
.ac-garage-summary > p { display: flex; align-items: flex-start; flex: 1 1 480px; gap: 10px; margin: 0; color: #a8b8ca; font-size: 14px; line-height: 1.75; }
.ac-garage-summary > p > .ac-icon { margin-top: 3px; flex: 0 0 20px; }
.ac-garage-summary > a { display: flex; align-items: center; gap: 9px; color: #dbb49d; font-size: 14px; line-height: 1.6; text-decoration: none; }
.ac-garage-summary strong { display: block; margin-bottom: 5px; color: #eef3f8; font-size: 30px; line-height: 1.2; font-weight: 600; font-variant-numeric: tabular-nums; }
.ac-garage-summary :is(span, small) { color: #9eafc1; font-size: 14px; line-height: 1.5; }
.ac-garage-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.ac-garage-tabs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid #374657;
  border-radius: 9px;
  background: #17232e;
  color: #b7c4d2;
  font-size: 15px;
  line-height: 1.4;
  text-decoration: none;
}
.ac-garage-tabs a:hover { color: #f2d7dd; border-color: #86535f; background: #28242f; }
.ac-garage-tabs a[aria-current="page"] { color: #f5c9d1; border-color: #b14251; background: #3a222d; }
.ac-garage-tabs :is(small, .badge, .ac-garage-count) { padding: 2px 6px; border-radius: 5px; background: #ffffff09; font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; }
.ac-garage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ac-garage-item { display: flex; flex-direction: column; overflow: hidden; }
.ac-garage-item-image { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #0e161e; }
.ac-garage-item-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ac-garage-item-body { display: flex; flex: 1; flex-direction: column; gap: 15px; min-width: 0; padding: 20px; }
.ac-garage-item-body > h2 { margin: 0; font-size: 21px; line-height: 1.4; }
.ac-garage-item-collections { display: flex; flex-wrap: wrap; gap: 7px; }
.ac-garage-item-collections > span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border: 1px solid #3d3c4d; border-radius: 5px; background: #272531; color: #cbb1be; font-size: 11px; line-height: 1.5; }
.ac-garage-item-collections .ac-icon { width: 14px; height: 14px; flex-basis: 14px; }
.ac-garage-item-name { margin: 0; color: #e8eef5; font-size: 21px; line-height: 1.4; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.ac-garage-item-name a { color: inherit; }
.ac-garage-item-name:hover,
.ac-garage-item-name a:hover { color: #f1c4cd; }
.ac-garage-version-list { display: grid; gap: 10px; margin: 0; padding: 14px 0; border-top: 1px solid #314153; border-bottom: 1px solid #314153; }
.ac-garage-version-list > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 1.5; }
.ac-garage-version-list dt { color: #9fafc1; font-weight: 400; }
.ac-garage-version-list dd { min-width: 0; margin: 0; color: #dce5ef; text-align: right; overflow-wrap: anywhere; }
.ac-garage-status { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; max-width: 100%; margin: 0; padding: 6px 9px; border: 1px solid #3a4858; border-radius: 7px; background: #1b2835; color: #a8b8ca; font-size: 12px; line-height: 1.55; }
.ac-garage-status[data-status="update_available"],
.ac-garage-status[data-status="version_changed"] { color: #e0bd95; border-color: #765b3f; background: #302a24; }
.ac-garage-status[data-status="up_to_date"] { color: #a5c9b6; border-color: #3b5f50; background: #1d2c29; }
.ac-garage-status[data-status="installed_newer"] { color: #b3c6dd; border-color: #405873; background: #1c2938; }
.ac-garage-status .ac-icon { width: 16px; height: 16px; flex: 0 0 16px; }
.ac-garage-item-actions { display: flex; gap: 8px; margin-top: auto; }
.ac-garage-item-actions > * { flex: 1; }
.ac-garage-item-actions > :is(a, button) { min-width: 0; padding-inline: 12px; font-size: 14px; }
.ac-garage-item-body > .ac-primary-download { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 14px; border: 1px solid #3c9b6e; border-radius: 9px; background: #193d30; color: #e9fff2; font-size: 14px; line-height: 1.5; text-decoration: none; }
.ac-garage-item-body > .ac-primary-download:hover { border-color: #63bf8c; background: #24513e; color: #fff; }
.ac-garage-how { padding: 36px 0 0; }
.ac-garage-how h2 { margin-bottom: 22px; font-size: 25px; }
.ac-garage-how ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; margin: 0; padding-left: 24px; color: #a6b7ca; font-size: 15px; line-height: 1.8; }
.ac-garage-how li::marker { color: #ca8d9a; font-weight: 600; }
.ac-garage-how strong { color: #d9e2ed; font-weight: 500; }
.ac-garage-pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 30px; color: #a3b3c6; font-size: 14px; }
.ac-garage-notice { padding: 15px 18px; margin-bottom: 22px; border: 1px solid #3e5d50; border-radius: 10px; background: #1e302b; color: #bbd8c8; font-size: 14px; line-height: 1.7; }
.ac-garage-empty-icon { display: inline-flex; margin-bottom: 17px; color: #c68d9a; }
.ac-garage-empty-icon > .ac-icon { width: 30px; height: 30px; }
.ac-garage-inline-editor { max-width: 780px; padding: 25px; margin-bottom: 28px; border: 1px solid #344455; border-radius: 16px; background: #15212d; }
.ac-garage-inline-editor > h2 { margin-bottom: 20px; font-size: 25px; line-height: 1.4; }
.ac-garage-inline-editor .ac-garage-version-editor { margin-top: 12px; }
.ac-garage-empty { padding: 32px 28px; }
.ac-garage-empty h2 { margin-bottom: 12px; font-size: 25px; }
.ac-garage-empty p { max-width: 650px; color: #a4b4c6; font-size: 16px; line-height: 1.75; }

.ac-garage-modal .modal-dialog { max-width: 560px; }
.ac-garage-modal .modal-content { overflow: hidden; border: 1px solid #3a4758; border-radius: 18px; background: #151f2a; color: #dfe7f0; box-shadow: 0 24px 80px #0007; }
.ac-garage-modal .modal-header { align-items: flex-start; gap: 15px; padding: 23px 25px 20px; border-bottom: 1px solid #2b3948; }
.ac-garage-modal .modal-header > div { flex: 1 1 auto; min-width: 0; }
.ac-garage-eyebrow { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; color: #c58d98; font-size: 11px; font-weight: 600; letter-spacing: .1em; }
.ac-garage-eyebrow .ac-icon { width: 17px; height: 17px; flex: 0 0 17px; }
.ac-garage-modal h2 { margin: 0; font-size: 25px; line-height: 1.3; overflow-wrap: anywhere; }
.ac-garage-close { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; margin: -5px -7px 0 auto; padding: 0; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #aebdcd; cursor: pointer; }
.ac-garage-close:hover { background: #25313e; border-color: #45505d; color: #fff; }
.ac-garage-modal .modal-body { padding: 22px 25px 25px; }
.ac-garage-modal p { font-size: 14px; line-height: 1.75; color: #aab9c9; }
.ac-garage-muted { margin: 17px 0 0; color: #94a6ba; font-size: 12px; line-height: 1.7; }
.ac-garage-modal .ac-garage-muted { color: #94a6ba; font-size: 12px; }
.ac-garage-guest-list { display: grid; gap: 18px; padding: 0; margin: 23px 0; list-style: none; }
.ac-garage-guest-list li { display: flex; gap: 13px; align-items: flex-start; }
.ac-garage-guest-list li > .ac-icon { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 3px; color: #ce919c; }
.ac-garage-guest-list li span { display: block; color: #a2b2c4; font-size: 14px; line-height: 1.7; }
.ac-garage-guest-list strong { display: block; color: #e3eaf3; font-size: 16px; font-weight: 500; }
.ac-garage-modal [data-garage-signin] { width: 100%; }
.ac-garage-editor-intro { margin-bottom: 20px; }
.ac-garage-choices { display: grid; gap: 10px; }
.ac-garage-choices > label { display: flex; align-items: flex-start; gap: 11px; padding: 15px; margin: 0; border: 1px solid #334355; border-radius: 11px; background: #182532; cursor: pointer; }
.ac-garage-choices > label:has(input:checked) { border-color: #904450; background: #2d242f; }
.ac-garage-choices > label > input { flex: 0 0 18px; width: 18px; height: 18px; margin: 4px 0 0; accent-color: #ba3f4c; cursor: pointer; }
.ac-garage-choices > label > .ac-icon { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 3px; color: #ba94a1; }
.ac-garage-choices > label > span { min-width: 0; }
.ac-garage-choices strong { display: block; font-size: 16px; line-height: 1.5; font-weight: 500; color: #e1e8f1; }
.ac-garage-choices small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.65; color: #a1b1c3; }
.ac-garage-version-editor { padding: 16px; border: 1px solid #354456; border-radius: 11px; background: #101a24; }
.ac-garage-version-editor > label { display: block; margin-bottom: 9px; color: #bfccda; font-size: 14px; }
.ac-garage-version-editor input { width: 100%; min-height: 46px; padding: 11px 12px; border: 1px solid #46566a; border-radius: 8px; background: #182430; color: #e9eff7; font: inherit; font-size: 16px; }
.ac-garage-listed-version { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 8px; margin: 12px 0 8px; color: #97a9bf; font-size: 12px; line-height: 1.7; }
.ac-garage-listed-version strong { display: inline; min-width: 0; max-width: 100%; color: #c9d6e4; font-size: 12px; overflow-wrap: anywhere; }
.ac-garage-listed-version button { min-height: 36px; padding: 5px 8px; border: 1px solid #684451; border-radius: 6px; background: #29232d; color: #d6b2bd; font: inherit; font-size: 12px; cursor: pointer; }
.ac-garage-version-editor > p { margin: 0; font-size: 12px; line-height: 1.7; }
.ac-garage-modal-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; margin-top: 22px; }
.ac-garage-remove { min-height: 44px; margin-top: 15px; padding: 9px 0; border: 0; border-radius: 5px; background: transparent; color: #c28b97; font: inherit; font-size: 13px; line-height: 1.5; text-align: left; cursor: pointer; }
.ac-garage-remove:hover { color: #edb9c6; }
.ac-garage-remove[data-confirm="true"] { color: #ffd0d8; }
.ac-garage-remove-confirm { margin: 16px 0 -8px; color: #d6b0bb !important; font-size: 12px !important; }
.ac-garage-error { margin-bottom: 14px; padding: 13px 15px; border: 1px solid #7a404b; border-radius: 9px; background: #33232c; color: #e8c4cd; font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
.ac-garage-error a { color: #ffd3de; text-decoration: underline; text-underline-offset: 3px; }
.ac-garage-modal [data-garage-retry] { margin-bottom: 16px; }
.ac-garage-modal [data-garage-loading] { display: flex; align-items: center; gap: 9px; padding: 13px 15px; border: 1px solid #354457; border-radius: 9px; background: #1a2937; color: #c2cfde; }
.ac-garage-feedback { position: fixed; z-index: 1080; top: 96px; left: 50%; width: min(520px, calc(100% - 32px)); transform: translateX(-50%); padding: 15px 18px; border: 1px solid #4b586a; border-radius: 12px; background: #202c39; box-shadow: 0 12px 32px #0006; color: #e2eaf4; font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
.ac-garage-modal [hidden],
.ac-garage-main [hidden],
.ac-card-tools [hidden],
.ac-garage-feedback[hidden] { display: none !important; }

@media (max-width: 991px) {
  .ac-garage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .ac-garage-benefits { gap: 14px; }
  .ac-garage-benefits > article { padding: 20px; }
}
@media (max-width: 767px) {
  .ac-garage-benefits { grid-template-columns: minmax(0, 1fr); }
  .ac-garage-how ol { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .ac-garage-summary > * { padding: 17px 14px; }
  .ac-garage-summary strong { font-size: 26px; }
  .ac-garage-summary :is(span, small) { font-size: 12px; }
  .ac-garage-tabs a { padding: 10px 12px; font-size: 14px; }
  .ac-garage-feedback { top: 82px; }
}
@media (max-width: 575px) {
  .ac-garage-page .ac-garage-main { padding: 25px 0 44px; }
  .ac-garage-heading p { font-size: 15px; }
  .ac-garage-summary { gap: 8px; }
  .ac-garage-grid { grid-template-columns: minmax(0, 1fr); }
  .ac-garage-item-body { padding: 18px; }
  .ac-garage-guest-cta,
  .ac-garage-empty { padding: 23px 20px; }
  .ac-garage-modal .modal-dialog { align-items: flex-end; width: 100%; max-width: none; height: 100%; min-height: 100%; margin: 0; }
  .ac-garage-modal .modal-content { max-height: calc(100dvh - 20px); border-bottom: 0; border-radius: 17px 17px 0 0; }
  .ac-garage-modal .modal-header { padding: 20px 20px 17px; }
  .ac-garage-modal h2 { font-size: 23px; }
  .ac-garage-modal .modal-body { padding: 18px 20px calc(20px + env(safe-area-inset-bottom, 0px)); }
  .ac-garage-choices > label { padding: 13px 12px; gap: 9px; }
  .ac-garage-choices strong { font-size: 15px; }
  .ac-garage-version-editor { padding: 14px; }
  .ac-garage-modal-actions { gap: 8px; }
  .ac-garage-modal-actions > * { padding-inline: 13px; font-size: 14px; }
  .ac-garage-listed-version button { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .ac-card-tools *, .ac-garage-modal *, .ac-garage-main *, .ac-garage-detail { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}