.as-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--as-modal-z-index);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--as-modal-safe-padding);
  background: var(--as-modal-backdrop);
  backdrop-filter: blur(var(--as-modal-blur));
  -webkit-backdrop-filter: blur(var(--as-modal-blur));
}

.as-modal-backdrop[hidden] {
  display: none;
}

.as-modal-surface {
  position: relative;
  max-height: var(--as-modal-max-height);
  overflow: auto;
  border: var(--as-border-width) solid var(--as-modal-surface-border);
  background: var(--as-modal-surface-bg);
  color: var(--as-text);
  box-shadow: var(--as-modal-shadow);
}

.as-modal-close {
  position: absolute;
  top: var(--as-modal-close-offset);
  right: var(--as-modal-close-offset);
  width: var(--as-modal-close-size);
  height: var(--as-modal-close-size);
  min-height: var(--as-modal-close-size);
  padding: 0;
  border: 0;
  border-radius: var(--as-radius-pill);
  background: var(--as-modal-close-bg);
  color: var(--as-modal-close-color);
  font-size:var(--asft-font-size-2793cbc214);
  line-height:var(--asft-line-height-6b86b273ff);
}

.as-modal-close:hover {
  background: var(--as-modal-close-hover-bg);
  color: var(--as-modal-close-hover-color);
}

.as-modal-primary {
  width: 100%;
  height: var(--as-modal-primary-height);
  min-height: var(--as-modal-primary-height);
  border: var(--as-border-width) solid var(--as-modal-primary-border);
  border-radius: var(--as-modal-primary-radius);
  background: var(--as-modal-primary-bg);
  color: var(--as-modal-primary-text);
  font-size: var(--as-modal-primary-font-size);
  font-weight: var(--as-modal-action-weight);
  line-height:var(--asft-line-height-6b86b273ff);
  box-shadow: var(--as-modal-primary-shadow);
}

.as-modal-close:focus-visible,
.as-modal-primary:focus-visible,
.as-alert-primary:focus-visible,
.as-modal-secondary:focus-visible {
  outline: var(--as-index-focus-outline);
  outline-offset: var(--as-index-focus-offset);
}

.as-alert-dialog {
  width:var(--asft-width-71f6ade2b9);
  padding: var(--as-modal-padding-confirm);
  border-radius: var(--as-modal-radius-confirm);
  text-align: center;
}

.as-alert-icon {
  width: var(--as-modal-icon-size);
  height: var(--as-modal-icon-size);
  margin:var(--asft-margin-282d9acd3c);
  color: var(--as-warning-red);
}

.as-alert-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.as-alert-dialog h2 {
  margin: 0;
  color: var(--as-modal-title-color);
  font-size: var(--as-modal-title-size);
  font-weight: var(--as-modal-title-weight);
  line-height: var(--as-modal-title-line-height);
  letter-spacing: var(--as-modal-title-letter-spacing);
}

.as-alert-subject {
  margin:var(--asft-margin-db36e3e134);
  max-width: var(--as-modal-text-width);
  color: var(--as-text);
  font-size: var(--as-type-control);
  font-weight: var(--as-font-weight-heavy);
  line-height: var(--as-modal-text-line-height);
}

.as-alert-subject[hidden] {
  display: none;
}

.as-alert-message {
  margin:var(--asft-margin-fcced825a4);
  max-width: var(--as-modal-text-width);
  color: var(--as-modal-text-color);
  font-size: var(--as-type-control);
  line-height: var(--as-modal-text-line-height);
}

.as-alert-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--as-modal-actions-gap);
  margin-top: var(--as-modal-actions-top);
  padding-top: var(--as-modal-actions-padding-top);
  border-top: var(--as-border-width) solid var(--as-modal-surface-border);
}

.as-alert-primary,
.as-modal-secondary {
  width: 100%;
  height: var(--as-modal-action-height);
  min-height: var(--as-modal-action-height);
  border-radius: var(--as-modal-action-radius);
  font-size: var(--as-modal-action-font-size);
  font-weight: var(--as-modal-action-weight);
  line-height: var(--as-modal-action-line-height);
}

.as-modal-secondary {
  border: var(--as-border-width) solid var(--as-modal-secondary-border);
  background: var(--as-modal-secondary-bg);
  color: var(--as-modal-secondary-text);
  box-shadow: none;
}

.as-modal-secondary:hover:not(:disabled) {
  background: var(--as-modal-secondary-hover-bg);
}

.as-alert-primary {
  border: var(--as-border-width) solid var(--as-modal-danger-border);
  background: var(--as-warning-red);
  color: var(--as-text);
}

.as-alert-primary:hover:not(:disabled) {
  box-shadow: var(--as-warning-red-glow);
}