/* Machine catalogue: Ant Card, Badge and Button with one shared spacing scale. */
.machines-page { --machine-gap: 14px; max-width: 1100px; }
.machines-page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 2px 0 20px; }
.machines-page-head > div:first-child { min-width: 0; }
.machines-subtitle { display: block; margin-top: 8px; color: var(--ant-color-text-tertiary); font-size: 12px; line-height: 1.5; }
.machines-page-head h1 { margin: 0; color: var(--ant-color-text); font-size: 32px; font-weight: 750; line-height: 1.2; letter-spacing: -.025em; }
.machines-controls { display: flex; align-items: center; gap: 16px; flex: none; }
.machines-total { display: flex; align-items: baseline; gap: 4px; flex: none; white-space: nowrap; }
.machines-total strong { color: var(--ant-color-primary); font-size: 26px; line-height: 1; font-weight: 650; font-variant-numeric: tabular-nums; }
.machines-total > span { color: var(--ant-color-text-secondary); font-size: 11px; }
.machines-controls .machines-refresh { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; width: auto; min-width: 68px; min-height: 34px; padding: 5px 10px; border: 1px solid var(--ant-color-border); border-radius: 8px; background: var(--ant-color-bg-container); color: var(--ant-color-text); font-size: 12px; font-weight: 500; line-height: 1.5; white-space: nowrap; box-shadow: none; }
.machines-refresh svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.machines-error { display: flex; align-items: center; flex-direction: column; gap: 12px; padding: 38px 24px; margin: 8px 0 16px; border: 1px solid var(--ant-color-border-secondary); border-radius: 16px; background: var(--ant-color-bg-container); text-align: center; }
.machines-error-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 4px; border: 1px solid rgba(250,173,20,.32); border-radius: 50%; background: rgba(250,173,20,.08); color: #edbc61; font-size: 24px; font-weight: 600; }
.machines-error h2 { margin: 0; color: var(--ant-color-text); font-size: 18px; font-weight: 600; }
.machines-error p { max-width: 340px; margin: 0; color: var(--ant-color-text-secondary); font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.machines-error .machines-retry { width: auto; min-width: 120px; min-height: 40px; margin: 6px 0 0; padding: 8px 20px; border-radius: 10px; font-size: 13px; }
.machines-catalog { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--machine-gap); }
.machines-catalog .machine-tile { display: flex; flex-direction: column; min-width: 0; width: 100%; padding: 0; margin: 0; overflow: hidden; border: 1px solid var(--ant-color-border-secondary); border-radius: 16px; background: var(--ant-color-bg-container); box-shadow: none; }
.machines-catalog .machine-tile > .ant-card-body,
.machines-catalog .machine-tile .xyk-ant-card-content { display: contents; }
.machine-logo-well { display: flex; align-items: center; justify-content: center; flex: none; min-width: 0; height: 124px; padding: 0 10px; background: transparent; }
.machine-logo-well > img { display: block; width: 100%; max-width: 260px; height: 100%; object-fit: contain; }
.machine-logo-well > img[src$="nostalgia.png"], .machine-detail-logo img[src$="nostalgia.png"] { filter: invert(1) hue-rotate(180deg); }
.machine-logo-fallback { color: var(--ant-color-text-secondary); font-size: 20px; font-weight: 650; text-align: center; }
.machine-tile-body { display: flex; flex: 1; flex-direction: column; min-width: 0; padding: 0 16px 12px; }
.machine-tile-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; margin-top: 8px; }
.machine-tile-status { display: flex; align-items: center; min-width: 0; }
xyk-machine-status { display: inline-flex; min-width: 0; }
.machine-tile-status .ant-badge { white-space: nowrap; }
.machine-tile-status .ant-badge-status-text { margin-inline-start: 6px; color: var(--ant-color-text-secondary); font-size: 11px; line-height: 1.5; }
.machine-detail-intro .ant-badge-status-text { margin-inline-start: 7px; color: var(--ant-color-text-secondary); font-size: 12px; line-height: 1.5; }
.machine-tile-body h2 { margin: 0; color: var(--ant-color-text); font-size: 16px; font-weight: 650; line-height: 22px; overflow-wrap: normal; word-break: normal; }
.machine-tile-version { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 4px 0 0; color: var(--ant-color-text-secondary); font-size: 12px; line-height: 18px; overflow-wrap: anywhere; }
.machine-tile-body .machine-details-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; width: auto; min-width: 50px; min-height: 34px; height: auto; margin: 0 -4px 0 0; padding: 4px; border: 0; border-radius: 7px; background: transparent; color: var(--ant-color-primary); font-size: 12px; font-weight: 500; line-height: 22px; box-shadow: none; white-space: nowrap; }
.machine-details-arrow { font-size: 18px; line-height: 1; color: inherit; }
.machines-page .machine-details-button:hover,
.machines-page .machines-refresh:hover { color: var(--ant-color-primary); border-color: var(--ant-color-primary); background: rgba(40,224,216,.04); }
.machines-empty { grid-column: 1/-1; padding: 48px 16px; border: 1px dashed var(--ant-color-border); border-radius: 16px; color: var(--ant-color-text-secondary); font-size: 13px; text-align: center; }
.machines-footnote { margin: 16px 2px 0; color: var(--ant-color-text-tertiary); font-size: 11px; line-height: 1.7; }
.machine-detail-intro { display: flex; align-items: center; gap: 18px; margin: 2px 0 22px; }
.machine-detail-logo { display: flex; align-items: center; justify-content: center; flex: none; width: 124px; height: 84px; padding: 14px; background: transparent; }
.machine-detail-logo img { width: 100%; height: 100%; object-fit: contain; }
.machine-detail-intro > div:last-child { min-width: 0; }
.machine-detail-intro p { margin: 7px 0 0; color: var(--ant-color-text-secondary); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.machine-detail-rows { padding: 0 16px; border: 1px solid var(--ant-color-border-secondary); border-radius: 12px; }
.machine-detail-rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 14px 0; font-size: 13px; line-height: 1.6; }
.machine-detail-rows > div + div { border-top: 1px solid var(--ant-color-border-secondary); }
.machine-detail-rows span { flex: none; color: var(--ant-color-text-secondary); }
.machine-detail-rows b { min-width: 0; font-weight: 500; color: var(--ant-color-text); text-align: right; overflow-wrap: anywhere; }
.machine-detail-note { color: var(--ant-color-text-secondary); font-size: 12px; line-height: 1.7; }
@media (min-width: 960px) { .machines-catalog { grid-template-columns: repeat(3,minmax(0,1fr)); } .machine-logo-well { height: 140px; padding: 6px 18px; } }
@media (max-width: 420px) {
  .machines-page { --machine-gap: 12px; }
  .machines-page-head { gap: 10px; margin-bottom: 16px; }
  .machines-page-head h1 { font-size: 28px; }
  .machines-subtitle { font-size: 11px; margin-top: 7px; }
  .machines-controls { gap: 10px; }
  .machines-total strong { font-size: 24px; }
  .machines-total > span { font-size: 10px; }
  .machines-controls .machines-refresh { min-width: 62px; padding: 5px 8px; font-size: 11px; }
  .machines-refresh svg { width: 12px; height: 12px; }
  .machine-logo-well { height: 112px; padding: 0 8px; }
  .machine-tile-body { padding: 0 12px 9px; }
  .machine-tile-body h2 { font-size: 15px; }
  .machine-tile-version { font-size: 11px; }
  .machine-tile-footer { gap: 5px; margin-top: 7px; }
  .machine-tile-body .machine-details-button { min-width: 46px; font-size: 11px; gap: 4px; }
  .machine-tile-status .ant-badge-status-text { font-size: 10px; margin-inline-start: 5px; }
  .machine-detail-intro { gap: 14px; }
  .machine-detail-logo { width: 110px; }
}
@media (max-width: 350px) {
  .machines-page-head h1 { font-size: 26px; }
  .machines-controls { gap: 7px; }
  .machines-total > span { font-size: 9px; }
  .machine-tile-body { padding-inline: 10px; }
  .machine-tile-body h2 { font-size: 13px; line-height: 20px; }
  .machine-tile-version { font-size: 10px; line-height: 16px; }
}