.update-dialog .modal-container {
  max-width: 480px;
  width: 90%;
}

.update-dialog-content {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--cls-space-lg);
}

.update-checking,
.update-no-update,
.update-available,
.update-downloading,
.update-install-ready,
.update-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

.update-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--cls-color-primary-bg);
  border-top-color: var(--cls-color-primary);
  border-radius: 50%;
  animation: update-spin 1s linear infinite;
  margin-bottom: var(--cls-space-base);
}

@keyframes update-spin {
  to {
    transform: rotate(360deg);
  }
}

.update-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin-bottom: var(--cls-space-base);
}

.update-icon.success {
  background-color: var(--cls-color-success-bg);
  color: var(--cls-color-success);
}

.update-icon.info {
  background-color: var(--cls-color-primary-bg);
  color: var(--cls-color-primary);
}

.update-icon.error {
  background-color: var(--cls-color-error-bg);
  color: var(--cls-color-error);
}

.update-dialog h4 {
  font-size: var(--cls-font-size-lg);
  font-weight: var(--cls-font-weight-semibold);
  color: var(--cls-color-text);
  margin: 0 0 var(--cls-space-sm);
}

.update-dialog p {
  font-size: var(--cls-font-size-base);
  color: var(--cls-color-text-light);
  margin: 0 0 var(--cls-space-base);
}

.update-size {
  font-size: var(--cls-font-size-sm);
  color: var(--cls-color-secondary);
  margin-bottom: var(--cls-space-base);
}

.update-notes {
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  background-color: var(--cls-color-bg);
  border-radius: var(--cls-radius-card);
  padding: var(--cls-space-base);
  margin-bottom: var(--cls-space-base);
  text-align: left;
}

.update-notes h5 {
  font-size: var(--cls-font-size-sm);
  font-weight: var(--cls-font-weight-semibold);
  color: var(--cls-color-text);
  margin: 0 0 var(--cls-space-sm);
}

.update-notes pre {
  font-size: var(--cls-font-size-sm);
  color: var(--cls-color-text-light);
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: var(--cls-font-family);
  line-height: 1.6;
}

.update-buttons {
  display: flex;
  gap: var(--cls-space-base);
  margin-top: var(--cls-space-base);
}

.update-buttons .btn {
  min-width: 100px;
}

.update-progress-container {
  width: 100%;
  max-width: 300px;
  margin-top: var(--cls-space-base);
}

.update-progress-bar {
  height: 8px;
  background-color: var(--cls-color-primary);
  border-radius: 4px;
  transition: width 0.3s ease;
  margin-bottom: var(--cls-space-xs);
}

.update-progress-text {
  font-size: var(--cls-font-size-sm);
  color: var(--cls-color-text-light);
}