.instance-management-dialog[data-v-recovery-dialog] {
  --instance-text: var(--art-gray-800);
  --instance-muted: var(--art-gray-600);
  --instance-soft: var(--art-gray-100);
  --instance-line: var(--art-card-border);
  width: min(1220px, calc(100vw - 48px));
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 48px);
  padding: 0;
  margin: auto;
  overflow: hidden;
  font-family: inherit;
  color: var(--instance-text);
  background: var(--default-box-color);
  border: 1px solid var(--art-card-border);
  border-radius: 16px;
  box-shadow: 0 24px 80px rgb(22 34 62 / 16%);
}
.instance-management-dialog[open][data-v-recovery-dialog] {
  display: flex;
  flex-direction: column;
}
.instance-management-dialog[data-v-recovery-dialog]::backdrop {
  background: rgb(26 34 52 / 30%);
  backdrop-filter: blur(3px);
}
.instance-management-dialog[data-v-recovery-dialog] * {
  box-sizing: border-box;
}
.instance-dialog-heading[data-v-recovery-dialog] {
  display: flex;
  flex-shrink: 0;
  gap: 12px;
  align-items: center;
  padding: 22px 26px;
  border-bottom: 1px solid var(--instance-line);
}
.instance-dialog-symbol[data-v-recovery-dialog] {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 46px;
  height: 46px;
  font-size: 24px;
  color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
  border-radius: 12px;
}
.instance-dialog-identity[data-v-recovery-dialog] {
  flex: 1;
  min-width: 0;
}
.instance-dialog-identity > span[data-v-recovery-dialog] {
  font-size: 12px;
  color: var(--instance-muted);
}
.instance-dialog-identity h2[data-v-recovery-dialog] {
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.heading-status[data-v-recovery-dialog] {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--instance-muted);
  background: var(--art-gray-200);
  border-radius: 20px;
}
.heading-status > span[data-v-recovery-dialog] {
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
}
.heading-status[data-status='running'][data-v-recovery-dialog] {
  color: var(--el-color-success);
  background: var(--el-color-success-light-9);
}
.instance-dialog-body[data-v-recovery-dialog] {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 18px;
  padding: 22px;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--instance-soft);
}
.detail-section[data-v-recovery-dialog] {
  min-width: 0;
  padding: 20px;
  background: var(--default-box-color);
  border: 1px solid var(--instance-line);
  border-radius: 12px;
}
.detail-section-heading[data-v-recovery-dialog] {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  min-height: 24px;
  margin-bottom: 18px;
}
.detail-section-heading h3[data-v-recovery-dialog] {
  display: flex;
  gap: 7px;
  align-items: center;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}
.detail-section-heading h3 svg[data-v-recovery-dialog] {
  font-size: 17px;
  color: var(--el-color-primary);
}
.detail-section-heading > span[data-v-recovery-dialog] {
  font-size: 11px;
  color: var(--instance-muted);
}
.detail-fields[data-v-recovery-dialog] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 20px;
  margin: 0;
}
.detail-fields > div[data-v-recovery-dialog] {
  min-width: 0;
}
.detail-fields dt[data-v-recovery-dialog] {
  margin-bottom: 7px;
  font-size: 12px;
  color: var(--instance-muted);
}
.detail-fields dd[data-v-recovery-dialog] {
  min-height: 21px;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.detail-fields .detail-status[data-v-recovery-dialog] {
  color: var(--el-color-primary);
}
.auto-renew-field[data-v-recovery-dialog] {
  display: flex;
  gap: 7px;
  align-items: center;
  color: var(--el-text-color-secondary);
}
.art-renew-switch[data-v-recovery-dialog] {
  display: inline-flex;
  align-items: center;
  width: 29px;
  height: 17px;
  padding: 3px;
  cursor: not-allowed;
  background: var(--el-fill-color-darker);
  border: 0;
  border-radius: 12px;
}
.art-renew-switch span[data-v-recovery-dialog] {
  width: 11px;
  height: 11px;
  background: var(--default-box-color);
  border-radius: 50%;
}
.art-renew-switch[data-v-recovery-dialog]:not(:disabled) {
  cursor: pointer;
}
.art-renew-switch.is-checked[data-v-recovery-dialog] {
  background: var(--el-color-primary);
}
.art-renew-switch.is-checked span[data-v-recovery-dialog] {
  transform: translateX(12px);
}
.machine-action-form[data-v-recovery-dialog] {
  display: grid;
  gap: 10px;
  padding: 14px;
  margin-top: 12px;
  background: var(--el-fill-color-light);
  border: 1px solid var(--art-card-border);
  border-radius: 10px;
}
.machine-operation-modal[data-v-recovery-dialog] {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 24px;
}
.machine-operation-modal__backdrop[data-v-recovery-dialog] {
  position: absolute;
  inset: 0;
  background: #17243866;
  backdrop-filter: blur(4px);
}
.machine-operation-modal__panel[data-v-recovery-dialog] {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  max-height: min(760px, calc(100dvh - 48px));
  overflow: auto;
  padding: 26px;
  margin: 0;
  gap: 20px;
  color: var(--instance-text);
  background: var(--default-box-color);
  border: 1px solid var(--instance-line);
  border-radius: 16px;
  box-shadow: 0 24px 80px rgb(22 34 62 / 20%);
}
.machine-operation-modal__panel.is-wide[data-v-recovery-dialog] {
  width: min(780px, 100%);
  max-height: calc(100dvh - 80px);
}
.machine-operation-fields[data-v-recovery-dialog] {
  display: grid;
  gap: 16px;
}
.machine-operation-fields[data-v-recovery-dialog]:empty {
  display: none;
}
.machine-operation-fields.is-reinstall[data-v-recovery-dialog] {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
.machine-operation-heading[data-v-recovery-dialog] {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--instance-line);
}
.machine-operation-symbol[data-v-recovery-dialog] {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 44px;
  height: 44px;
  font-size: 22px;
  color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
  border-radius: 12px;
}
.machine-operation-heading > div[data-v-recovery-dialog] {
  flex: 1;
  min-width: 0;
}
.machine-operation-heading h3[data-v-recovery-dialog] {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 600;
}
.machine-action-form .machine-operation-heading p[data-v-recovery-dialog] {
  font-size: 12px;
  color: var(--instance-muted);
}
.machine-operation-heading p span[data-v-recovery-dialog] {
  margin: 0 8px;
}
.machine-operation-heading > .art-icon-button[data-v-recovery-dialog] {
  align-self: flex-start;
  min-width: 28px;
  min-height: 28px;
  color: var(--instance-muted);
}
.machine-action-form .machine-operation-notice[data-v-recovery-dialog] {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--instance-muted);
  background: var(--instance-soft);
  border-radius: 9px;
}
.machine-action-form .machine-operation-notice.is-warning[data-v-recovery-dialog] {
  color: var(--el-color-warning);
  background: var(--el-color-warning-light-9);
}
.machine-operation-notice > svg[data-v-recovery-dialog] {
  flex-shrink: 0;
  margin-top: 3px;
  font-size: 16px;
}
.machine-operation-modal__result[data-v-recovery-dialog] {
  position: relative;
  z-index: 1;
  width: min(720px, 100%);
  padding: 12px 16px;
  margin: 10px 0 0;
  background: var(--default-box-color);
  border: 1px solid var(--art-card-border);
  border-radius: 10px;
}
.machine-action-form p[data-v-recovery-dialog] {
  margin: 0;
  font-size: 12px;
  color: var(--el-text-color-secondary);
}
.machine-action-form label[data-v-recovery-dialog] {
  display: grid;
  gap: 9px;
  font-size: 13px;
}
.machine-action-form input[data-v-recovery-dialog],
.machine-action-form select[data-v-recovery-dialog] {
  min-width: 0;
  width: 100%;
  min-height: 40px;
  padding: 10px 12px;
  font: inherit;
  color: var(--el-text-color-primary);
  background: var(--default-box-color);
  border: 1px solid var(--instance-line);
  border-radius: 8px;
}
.machine-action-form input[data-v-recovery-dialog]:focus-visible,
.machine-action-form select[data-v-recovery-dialog]:focus-visible {
  outline: 2px solid var(--el-color-primary-light-5);
}
.machine-action-form details label[data-v-recovery-dialog] {
  margin-top: 10px;
}
.machine-action-buttons[data-v-recovery-dialog] {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 20px;
  border-top: 1px solid var(--instance-line);
}
.machine-action-buttons > .art-icon-button[data-v-recovery-dialog] {
  min-height: 38px;
  padding: 8px 18px;
  font-size: 13px;
  border: 1px solid var(--instance-line);
  border-radius: 8px;
}
.machine-action-submit[data-v-recovery-dialog] {
  min-height: 38px;
  padding: 9px 22px;
  font: inherit;
  color: white;
  cursor: pointer;
  background: var(--el-color-primary);
  border: 0;
  border-radius: 8px;
}
.machine-action-submit[data-v-recovery-dialog]:disabled {
  cursor: default;
  opacity: 0.5;
}
.machine-action-result[data-v-recovery-dialog] {
  display: grid;
  gap: 8px;
  margin-bottom: 0;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.machine-action-result a[data-v-recovery-dialog] {
  color: var(--el-color-primary);
}
.machine-choice-section[data-v-recovery-dialog] {
  min-width: 0;
  padding: 0;
  margin: 4px 0;
  border: 0;
}
.machine-choice-section legend[data-v-recovery-dialog] {
  padding: 0;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 500;
}
.renewal-choice-grid[data-v-recovery-dialog] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.renewal-checkout[data-v-recovery-dialog] {
  display: grid;
  gap: 14px;
}
.renewal-checkout__cycle[data-v-recovery-dialog] {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--art-gray-700);
}
.renewal-checkout__cycle legend[data-v-recovery-dialog] {
  margin-bottom: 10px;
}
.renewal-checkout__choices[data-v-recovery-dialog] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.renewal-checkout__choice[data-v-recovery-dialog] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--instance-line);
  border-radius: 6px;
  cursor: pointer;
}
.renewal-checkout__choice.selected[data-v-recovery-dialog] {
  border-color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
}
.renewal-checkout__choice input[data-v-recovery-dialog] {
  margin: 0;
  accent-color: var(--el-color-primary);
}
.renewal-checkout__choice strong[data-v-recovery-dialog] {
  grid-column: 2;
  overflow-wrap: anywhere;
}
@media (max-width: 480px) {
.renewal-checkout__choices[data-v-recovery-dialog] {
    grid-template-columns: minmax(0, 1fr);
}
}
.renewal-checkout__note[data-v-recovery-dialog] {
  margin: 0;
  color: var(--art-gray-500);
  font-size: 13px;
}
.machine-action-form .machine-choice-card[data-v-recovery-dialog] {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 18px;
  cursor: pointer;
  background: var(--default-box-color);
  border: 1px solid var(--instance-line);
  border-radius: 10px;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.machine-choice-card[data-v-recovery-dialog]:hover {
  border-color: var(--el-color-primary-light-5);
}
.machine-action-form .machine-choice-card.selected[data-v-recovery-dialog] {
  background: color-mix(in srgb, var(--el-color-primary) 4%, var(--default-box-color));
  border-color: var(--el-color-primary);
}
.machine-action-form .machine-choice-card input[data-v-recovery-dialog] {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  opacity: 0;
}
.machine-choice-card[data-v-recovery-dialog]:focus-within {
  outline: 2px solid var(--el-color-primary-light-5);
  outline-offset: 2px;
}
.choice-heading[data-v-recovery-dialog] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 18px;
  font-weight: 500;
}
.choice-heading .art-svg-icon[data-v-recovery-dialog],
.image-version-card .art-svg-icon[data-v-recovery-dialog] {
  color: var(--el-color-primary);
}
.machine-choice-card strong[data-v-recovery-dialog] {
  font-size: 24px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.choice-caption[data-v-recovery-dialog] {
  font-size: 11px;
  color: var(--el-text-color-secondary);
}
.image-family-tabs[data-v-recovery-dialog] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.image-family-tabs .art-icon-button[data-v-recovery-dialog] {
  gap: 7px;
  min-height: 40px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--instance-muted);
  background: var(--instance-soft);
  border: 1px solid transparent;
  border-radius: 8px;
}
.image-family-tabs .art-icon-button.selected[data-v-recovery-dialog] {
  color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
  border-color: var(--el-color-primary);
}
.image-family-count[data-v-recovery-dialog] {
  font-size: 11px;
  color: var(--instance-muted);
}
.system-family-icon[data-v-recovery-dialog] {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.image-version-grid[data-v-recovery-dialog] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-height: 190px;
  padding: 3px;
  overflow: auto;
}
.machine-action-form .image-version-card[data-v-recovery-dialog] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 12px 14px;
}
.image-version-card span[data-v-recovery-dialog] {
  overflow-wrap: anywhere;
}
.operation-log[data-v-recovery-dialog] {
  padding: 10px 12px 12px;
  margin-top: 14px;
  font-size: 12px;
  background: var(--el-fill-color-lighter, rgb(0 0 0 / 2%));
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 10px;
}
.operation-log__head[data-v-recovery-dialog] {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--el-border-color-lighter);
}
.operation-log__head h4[data-v-recovery-dialog] {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}
.operation-log__head > span[data-v-recovery-dialog] {
  font-size: 11px;
  color: var(--el-text-color-secondary);
}
.operation-log__list[data-v-recovery-dialog] {
  display: grid;
  gap: 1px;
  padding: 0;
  margin: 6px 0 0;
  list-style: none;
}

/* 列宽写死而不是 auto：有「核对」按钮的行和没有的行必须列对齐，
   否则时间列会在两种行之间左右跳动。 */
.operation-log__row[data-v-recovery-dialog] {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 60px 106px 56px;
  gap: 10px;
  align-items: center;
  padding: 5px 6px;
  border-radius: 8px;
}
.operation-log__row[data-v-recovery-dialog]:hover {
  background: var(--el-fill-color-light, rgb(0 0 0 / 4%));
}
.operation-log__icon[data-v-recovery-dialog] {
  display: inline-flex;
  color: var(--el-text-color-secondary);
}
.operation-log__action[data-v-recovery-dialog] {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  color: var(--el-text-color-primary);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.operation-log__count[data-v-recovery-dialog] {
  padding: 0 6px;
  font-size: 11px;
  color: var(--el-text-color-secondary);
  background: var(--el-fill-color, rgb(0 0 0 / 6%));
  border-radius: 999px;
}
.operation-log__state[data-v-recovery-dialog] {
  justify-self: start;
  padding: 1px 8px;
  font-size: 11px;
  color: var(--el-text-color-secondary);
  white-space: nowrap;
  background: var(--el-fill-color, rgb(0 0 0 / 6%));
  border-radius: 999px;
}
.operation-log__state[data-state='accepted'][data-v-recovery-dialog] {
  color: var(--el-color-success);
  background: var(--el-color-success-light-9);
}
.operation-log__state[data-state='failed'][data-v-recovery-dialog] {
  color: var(--el-color-danger);
  background: var(--el-color-danger-light-9);
}
.operation-log__state[data-state='uncertain'][data-v-recovery-dialog],
.operation-log__state[data-state='dispatching'][data-v-recovery-dialog] {
  color: var(--el-color-warning);
  background: var(--el-color-warning-light-9);
}
.operation-log__time[data-v-recovery-dialog] {
  justify-self: start;
  font-variant-numeric: tabular-nums;
  color: var(--el-text-color-secondary);
  white-space: nowrap;
}
.operation-log__resolve[data-v-recovery-dialog] {
  justify-self: start;
  min-width: 0;
  min-height: 24px;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--el-color-primary);
}
.operation-log__foot[data-v-recovery-dialog] {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--el-text-color-secondary);
}
.coupon-row[data-v-recovery-dialog] {
  display: flex;
  gap: 10px;
  align-items: center;
  padding-top: 11px;
  margin-top: 13px;
  font-size: 11px;
  color: var(--el-text-color-secondary);
  border-top: 1px dashed var(--el-border-color-lighter);
}
.coupon-row > span[data-v-recovery-dialog]:first-child {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}
.coupon-row strong[data-v-recovery-dialog] {
  font-weight: 500;
  color: var(--el-text-color-primary);
}
.server-fields[data-v-recovery-dialog] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.server-password[data-v-recovery-dialog] {
  display: flex;
  gap: 6px;
  align-items: center;
}
.server-password > span[data-v-recovery-dialog] {
  min-width: 0;
  overflow-wrap: anywhere;
}
.server-password .art-icon-button[data-v-recovery-dialog] {
  flex-shrink: 0;
  min-width: 24px;
  min-height: 22px;
  padding: 0;
}
.detail-copy-button[data-v-recovery-dialog] {
  min-width: 0;
  min-height: 30px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
}

/* 复制成功后的两秒里，按钮自己就是"已完成"的回执（toast 会飘走，页脚那行也太轻）。 */
.detail-copy-button.is-copied[data-v-recovery-dialog] {
  color: var(--el-color-success);
  background: var(--el-color-success-light-9);
}
.server-caption[data-v-recovery-dialog] {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  padding: 9px 10px;
  margin-top: 22px;
  font-size: 11px;
  line-height: 1.7;
  color: var(--el-text-color-secondary);
  background: var(--el-fill-color-lighter);
  border-radius: 7px;
}
.server-caption svg[data-v-recovery-dialog] {
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 14px;
}
.operations-section[data-v-recovery-dialog],
.upstream-section[data-v-recovery-dialog],
.detail-notice[data-v-recovery-dialog],
.detail-loading[data-v-recovery-dialog] {
  grid-column: 1 / -1;
}
.operations-section[data-v-recovery-dialog] {
  padding-top: 18px;
  padding-bottom: 18px;
}
.operations-section .detail-section-heading[data-v-recovery-dialog] {
  margin-bottom: 16px;
}
.instance-operation-grid[data-v-recovery-dialog] {
  display: grid;
  grid-template-columns: repeat(var(--instance-action-columns, 10), minmax(0, 1fr));
  gap: 10px;
}
.instance-operation-grid.has-provision[data-v-recovery-dialog] {
  --instance-action-columns: 11;
}
.instance-operation-grid > .art-icon-button[data-v-recovery-dialog],
.unsupported-operation[data-v-recovery-dialog] {
  min-height: 76px;
  background: var(--instance-soft);
  border: 1px solid transparent;
  border-radius: 10px;
}
.instance-operation-grid > .art-icon-button[data-v-recovery-dialog] {
  flex-direction: column;
  gap: 10px;
  padding: 12px 6px;
  font-size: 12px;
  color: var(--art-gray-700);
}
.instance-operation-grid > .art-icon-button[data-v-recovery-dialog] >  svg {
  font-size: 21px;
  color: var(--art-gray-600);
}
.instance-operation-grid > .art-icon-button[data-v-recovery-dialog]:hover:not(:disabled) {
  color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
  border-color: var(--el-color-primary-light-7);
}
.instance-operation-grid > .art-icon-button[data-v-recovery-dialog]:hover:not(:disabled) >  svg {
  color: var(--el-color-primary);
}
.instance-operation-grid > .art-icon-button[data-action='renew'][data-v-recovery-dialog] {
  color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
}
.instance-operation-grid > .art-icon-button[data-action='renew'][data-v-recovery-dialog] >  svg {
  color: var(--el-color-primary);
}
.instance-operation-grid > .art-icon-button[data-v-recovery-dialog]:disabled {
  opacity: 0.38;
}
.unsupported-operation[data-v-recovery-dialog] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.unsupported-operation .art-icon-button[data-v-recovery-dialog] {
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 64px;
  padding: 4px;
  font-size: 12px;
}
.upstream-fields[data-v-recovery-dialog] {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px 20px;
}
.power-confirm[data-v-recovery-dialog] {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px;
  margin-top: 10px;
  font-size: 12px;
  background: var(--el-color-warning-light-9);
  border-radius: 7px;
}
.power-confirm span[data-v-recovery-dialog] {
  flex: 1;
}
.power-confirm button[data-v-recovery-dialog] {
  padding: 5px 12px;
  font: inherit;
  cursor: pointer;
  background: var(--default-box-color);
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 6px;
}
.power-confirm button.primary[data-v-recovery-dialog] {
  color: white;
  background: var(--el-color-primary);
  border-color: var(--el-color-primary);
}
.detail-notice[data-v-recovery-dialog] {
  padding: 9px 12px;
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
  border-radius: 7px;
}
.detail-notice.is-error[data-v-recovery-dialog] {
  color: var(--el-color-warning);
  background: var(--el-color-warning-light-9);
}
.instance-dialog-footer[data-v-recovery-dialog] {
  display: flex;
  flex-shrink: 0;
  gap: 12px;
  align-items: center;
  padding: 16px 26px;
  background: var(--default-box-color);
  border-top: 1px solid var(--instance-line);
}
.instance-dialog-footer > span[data-v-recovery-dialog] {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  line-height: 1.7;
  color: var(--instance-muted);
  overflow-wrap: anywhere;
}
.instance-dialog-footer .art-icon-button[data-v-recovery-dialog] {
  min-height: 36px;
  padding: 8px 14px;
  font-size: 13px;
}
.detail-close-button[data-v-recovery-dialog] {
  min-height: 36px;
  padding: 8px 24px;
  font: inherit;
  font-size: 13px;
  color: white;
  cursor: pointer;
  background: var(--el-color-primary);
  border: 0;
  border-radius: 8px;
}
.instance-management-dialog button[data-v-recovery-dialog]:focus-visible {
  outline: 2px solid var(--el-color-primary);
  outline-offset: 3px;
}
.detail-loading[data-v-recovery-dialog] {
  min-height: 450px;
  padding: 20px;
}
.loading-caption[data-v-recovery-dialog] {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 25px;
  font-size: 12px;
  color: var(--el-text-color-secondary);
}
.loading-grid[data-v-recovery-dialog] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 24px;
}
.loading-field span[data-v-recovery-dialog],
.loading-field strong[data-v-recovery-dialog] {
  display: block;
  width: 45%;
  height: 12px;
  margin-bottom: 10px;
  background: var(--el-fill-color-darker);
  border-radius: 4px;
}
.loading-field strong[data-v-recovery-dialog] {
  width: 80%;
  height: 18px;
  background: var(--el-fill-color-light);
}
@media (width <= 900px) {
.instance-dialog-body[data-v-recovery-dialog] {
    grid-template-columns: minmax(0, 1fr);
}
.upstream-fields[data-v-recovery-dialog] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.instance-operation-grid[data-v-recovery-dialog] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
@media (width <= 600px) {
.machine-operation-fields.is-reinstall[data-v-recovery-dialog] {
    grid-template-columns: minmax(0, 1fr);
}
.machine-operation-modal__panel.is-wide[data-v-recovery-dialog] {
    max-height: calc(100dvh - 24px);
}
.machine-operation-modal[data-v-recovery-dialog] {
    padding: 12px;
}
.machine-operation-modal__panel[data-v-recovery-dialog] {
    padding: 20px;
    max-height: calc(100dvh - 24px);
}
.machine-operation-heading[data-v-recovery-dialog] {
    gap: 10px;
}
.machine-operation-heading p span[data-v-recovery-dialog] {
    margin: 0 4px;
}
.renewal-choice-grid[data-v-recovery-dialog] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.image-version-grid[data-v-recovery-dialog] {
    grid-template-columns: minmax(0, 1fr);
}
.instance-management-dialog[data-v-recovery-dialog] {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 24px);
    border-radius: 12px;
}
.instance-dialog-heading[data-v-recovery-dialog] {
    gap: 9px;
    padding: 14px 16px;
}
.instance-dialog-identity h2[data-v-recovery-dialog] {
    font-size: 16px;
}
.heading-status[data-v-recovery-dialog] {
    display: none;
}
.instance-dialog-body[data-v-recovery-dialog] {
    gap: 12px;
    padding: 12px;
}
.detail-section[data-v-recovery-dialog] {
    padding: 14px;
}
.detail-fields[data-v-recovery-dialog],
  .upstream-fields[data-v-recovery-dialog] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}
.instance-operation-grid[data-v-recovery-dialog] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.instance-dialog-footer[data-v-recovery-dialog] {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 16px;
}
.instance-dialog-footer > span[data-v-recovery-dialog] {
    flex-basis: 100%;
}
.loading-grid[data-v-recovery-dialog] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.coupon-row[data-v-recovery-dialog] {
    flex-wrap: wrap;
}
}
.disposal-section[data-v-recovery-dialog] {
  grid-column: 1 / -1;
  border-color: var(--el-color-warning-light-5);
}
.disposal-section p[data-v-recovery-dialog] {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--el-text-color-secondary);
}
.disposal-section label[data-v-recovery-dialog] {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
}
.disposal-section textarea[data-v-recovery-dialog] {
  display: block;
  width: 100%;
  padding: 10px;
  margin-top: 8px;
  font: inherit;
  color: inherit;
  background: var(--default-box-color);
  border: 1px solid var(--el-border-color);
  border-radius: 7px;
}
.disposal-section button[data-v-recovery-dialog]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
@media (max-width: 560px) {
.operation-log__row[data-v-recovery-dialog] {
    grid-template-columns: 18px minmax(0, 1fr) 60px 56px;
}
.operation-log__time[data-v-recovery-dialog] {
    display: none;
}
}

/* ==========================================================================
   实例详情页（非弹窗）
   同一个内容组件既能当弹窗也能当页面，所以这里只覆盖"外壳 + 版式"：
   页面态下不再有自身滚动容器与阴影，正文改成左右两栏（左：资料与计费，
   右：资源/监控/机器操作），与云端控制台的产品详情页保持一致的心智。
   ========================================================================== */
/* 这些 token 原本挂在弹窗根节点上；页面态换了根元素，必须在这里重新声明，
   否则 .detail-section 的边框/底色会因为变量未定义而整条失效（不会报错，只是"没了"）。 */
.instance-detail-page[data-v-recovery-dialog] {
  --instance-text: var(--art-gray-800);
  --instance-muted: var(--art-gray-600);
  --instance-soft: var(--art-gray-100);
  --instance-line: var(--art-card-border);
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  margin: 0;
  color: var(--instance-text);
}
.instance-detail-page[data-v-recovery-dialog] * {
  box-sizing: border-box;
}
.instance-detail-heading[data-v-recovery-dialog] {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--instance-line);
}
.instance-detail-back[data-v-recovery-dialog] {
  flex-shrink: 0;
}
.instance-detail-identity[data-v-recovery-dialog] {
  flex: 1;
  min-width: 180px;
}
.instance-detail-identity > span[data-v-recovery-dialog] {
  font-size: 12px;
  color: var(--instance-muted);
}
.instance-detail-identity h1[data-v-recovery-dialog] {
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.instance-detail-actions[data-v-recovery-dialog] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.instance-detail-actions .art-icon-button[data-v-recovery-dialog] {
  min-height: 32px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--instance-text);
  background: var(--instance-soft);
}
.instance-detail-actions .art-icon-button[data-v-recovery-dialog]:hover:not(:disabled) {
  color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
}
.instance-detail-page .instance-dialog-body[data-v-recovery-dialog] {
  display: block;
  padding: 18px 0 0;
  overflow: visible;
  background: transparent;
}
.detail-columns[data-v-recovery-dialog] {
  display: grid;
  gap: 18px;
  align-items: start;
}
.detail-column[data-v-recovery-dialog] {
  display: grid;
  gap: 18px;
  align-content: start;
  min-width: 0;
}
@media (min-width: 1080px) {
.detail-columns[data-v-recovery-dialog] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
}
}
.usage-fields[data-v-recovery-dialog] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.usage-note[data-v-recovery-dialog] {
  grid-column: 1 / -1;
}
.usage-note dd[data-v-recovery-dialog] {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--instance-muted);
}
.instance-detail-footer[data-v-recovery-dialog] {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 0 2px;
  margin-top: 18px;
  border-top: 1px solid var(--instance-line);
}
.instance-detail-footer .detail-message[data-v-recovery-dialog] {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  line-height: 1.7;
  color: var(--instance-muted);
  overflow-wrap: anywhere;
}

/* ---- 详情页：参考云端控制台的卡片版式 ---- */
.instance-detail-tabs[data-v-recovery-dialog] {
  display: block;
  padding: 4px 0 0;
}
.instance-detail-tabs > button[data-v-recovery-dialog] {
  padding: 10px 14px;
  font: inherit;
  font-size: 13px;
  color: var(--instance-muted);
  cursor: pointer;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
}
.instance-detail-tabs > button.is-active[data-v-recovery-dialog] {
  font-weight: 600;
  color: var(--el-color-primary);
  border-bottom-color: var(--el-color-primary);
}
.instance-detail-tabs > button[data-v-recovery-dialog]:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.info-fields[data-v-recovery-dialog],
.login-fields[data-v-recovery-dialog],
.system-fields[data-v-recovery-dialog],
.billing-fields[data-v-recovery-dialog] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.info-serial[data-v-recovery-dialog] {
  font-size: 11px;
  color: var(--instance-muted);
}
.info-status[data-v-recovery-dialog] {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--el-color-success);
}
.info-status > span[data-v-recovery-dialog] {
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
}
.info-status[data-status='stopped'][data-v-recovery-dialog] {
  color: var(--instance-muted);
}
.info-status[data-status='expired'][data-v-recovery-dialog],
.info-status[data-status='failed'][data-v-recovery-dialog] {
  color: var(--el-color-danger);
}
.info-spec[data-v-recovery-dialog] {
  grid-column: 1 / -1;
}
.info-spec dd[data-v-recovery-dialog] {
  display: grid;
  gap: 4px;
  font-weight: 500;
}
.days-left[data-v-recovery-dialog] {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--el-color-warning);
}
.billing-actions[data-v-recovery-dialog] {
  display: flex;
  gap: 10px;
  align-items: center;
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px dashed var(--el-border-color-lighter);
}
.billing-actions .art-icon-button[data-v-recovery-dialog] {
  min-height: 30px;
  padding: 6px 12px;
  font-size: 12px;
}
.auto-renew-field[data-v-recovery-dialog] {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
}
.auto-renew-label[data-v-recovery-dialog] {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  color: var(--instance-muted);
}
.auto-renew-label small[data-v-recovery-dialog] {
  font-size: 11px;
}
.usage-tiles[data-v-recovery-dialog] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.usage-tile[data-v-recovery-dialog] {
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: 18px 12px;
  text-align: center;
  background: var(--instance-soft);
  border-radius: 10px;
}
.usage-tile__name[data-v-recovery-dialog] {
  font-size: 12px;
  color: var(--instance-muted);
}
.usage-tile strong[data-v-recovery-dialog] {
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.usage-tile small[data-v-recovery-dialog] {
  font-size: 11px;
  color: var(--instance-muted);
}
.chart-range[data-v-recovery-dialog] {
  font-size: 12px;
  color: var(--instance-muted);
}
.chart-grid[data-v-recovery-dialog] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 720px) {
.chart-grid[data-v-recovery-dialog] {
    grid-template-columns: minmax(0, 1fr);
}
}
.chart-panel[data-v-recovery-dialog] {
  min-width: 0;
  padding: 12px 14px;
  background: var(--instance-soft);
  border-radius: 10px;
}
.chart-panel header[data-v-recovery-dialog] {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
}
.chart-panel header small[data-v-recovery-dialog] {
  font-size: 11px;
  font-weight: 400;
  color: var(--instance-muted);
}
.chart-empty[data-v-recovery-dialog] {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  min-height: 92px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--instance-muted);
  background-image: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 9px,
    rgb(0 0 0 / 4%) 9px,
    rgb(0 0 0 / 4%) 10px
  );
  border-radius: 8px;
}
.chart-panel.is-wide[data-v-recovery-dialog] {
  grid-column: 1 / -1;
}
.usage-foot[data-v-recovery-dialog] {
  margin: 10px 0 0;
  font-size: 11px;
  color: var(--instance-muted);
}
.usage-foot.is-error[data-v-recovery-dialog] {
  color: var(--el-color-danger);
}
.chart-note[data-v-recovery-dialog] {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.7;
  color: var(--instance-muted);
}

/* ---- 详情页：沿用 art-card / detail-section 既有卡片样式，这里只补行式列表与局部排版 ---- */
.detail-rows[data-v-recovery-dialog] {
  display: grid;
  margin: 0;
}
.detail-row[data-v-recovery-dialog] {
  display: grid;
  grid-template-columns: minmax(88px, 30%) minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 11px 0;
  font-size: 13px;
  border-top: 1px solid var(--instance-line);
}
.detail-row[data-v-recovery-dialog]:first-child {
  border-top: 0;
  padding-top: 2px;
}
.detail-row dt[data-v-recovery-dialog] {
  font-size: 12px;
  color: var(--instance-muted);
}
.detail-row dd[data-v-recovery-dialog] {
  margin: 0;
  font-weight: 500;
  color: var(--instance-text);
  text-align: right;
  overflow-wrap: anywhere;
}
.detail-row.is-stacked dd[data-v-recovery-dialog] {
  display: grid;
  gap: 3px;
  justify-items: end;
  line-height: 1.6;
  text-align: right;
}
.is-mono[data-v-recovery-dialog] {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.detail-status[data-v-recovery-dialog] {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  margin-left: 8px;
  font-size: 11px;
  border-radius: 999px;
}
.detail-status.is-warning[data-v-recovery-dialog] {
  color: var(--el-color-warning);
  background: var(--el-color-warning-light-9);
}
.detail-hint[data-v-recovery-dialog] {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  padding: 9px 10px;
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 1.7;
  color: var(--instance-muted);
  background: var(--instance-soft);
  border-radius: 8px;
}
.instance-detail-heading[data-v-recovery-dialog] {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  padding: 2px 0 14px;
  border-bottom: 1px solid var(--instance-line);
}
.instance-detail-back[data-v-recovery-dialog] {
  flex-shrink: 0;
}
.instance-detail-identity[data-v-recovery-dialog] {
  flex: 1;
  min-width: 180px;
}
.instance-detail-identity > span[data-v-recovery-dialog] {
  font-size: 12px;
  color: var(--instance-muted);
}
.instance-detail-identity h1[data-v-recovery-dialog] {
  margin: 2px 0 0;
  font-size: 20px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.instance-detail-actions[data-v-recovery-dialog] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.instance-detail-actions .art-icon-button[data-v-recovery-dialog] {
  min-height: 32px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--instance-text);
  background: var(--instance-soft);
  border-radius: 6px;
}
.instance-detail-actions .art-icon-button[data-v-recovery-dialog]:hover:not(:disabled) {
  color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
}
.info-status[data-v-recovery-dialog] {
  justify-content: flex-end;
}
.billing-actions .art-icon-button[data-v-recovery-dialog] {
  min-height: 30px;
  padding: 6px 12px;
  font-size: 12px;
}
.auto-renew-label[data-v-recovery-dialog] {
  margin-right: 8px;
  font-size: 12px;
  color: var(--instance-muted);
}
.chart-grid[data-v-recovery-dialog] {
  grid-template-columns: minmax(0, 1fr);
}
.chart-series[data-v-recovery-dialog] {
  margin-top: 8px;
}
.chart-series__name[data-v-recovery-dialog] {
  display: block;
  margin-bottom: 2px;
  font-size: 11px;
  color: var(--instance-muted);
}
.chart-panel header small[data-v-recovery-dialog] {
  font-size: 11px;
  font-weight: 400;
  color: var(--instance-muted);
}
.instance-detail-footer[data-v-recovery-dialog] {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 0 2px;
  margin-top: 18px;
  border-top: 1px solid var(--instance-line);
}
.instance-detail-footer .detail-message[data-v-recovery-dialog] {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  line-height: 1.7;
  color: var(--instance-muted);
  overflow-wrap: anywhere;
}
.instance-detail-footer .art-icon-button[data-v-recovery-dialog] {
  min-height: 30px;
  padding: 6px 12px;
  font-size: 12px;
}