.td-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--td-space-6);
  padding-top: max(var(--td-space-6), env(safe-area-inset-top));
  padding-bottom: max(var(--td-space-6), env(safe-area-inset-bottom));
  background-color: var(--td-color-overlay);
  overflow: hidden;
}

.td-modal__dialog {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 100%;
  overflow: hidden;
  border: 1px solid var(--td-color-border);
  border-radius: var(--td-radius-lg);
  background-color: var(--td-color-surface);
  color: var(--td-color-fg);
  box-shadow: var(--td-shadow-lg);
  outline: none;
}

.td-modal__dialog--sm {
  max-width: 24rem;
}

.td-modal__dialog--md {
  max-width: 32rem;
}

.td-modal__dialog--lg {
  max-width: 48rem;
}

.td-modal__dialog--full {
  max-width: 100%;
  height: 100%;
}

.td-modal__header {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--td-space-3);
  padding: var(--td-space-4) var(--td-space-5);
  border-bottom: 1px solid var(--td-color-border);
}

.td-modal__title {
  margin: 0;
  font-family: var(--td-font-heading);
  font-size: var(--td-text-lg);
  font-weight: var(--td-weight-semibold);
  line-height: var(--td-leading-tight);
}

.td-modal__close {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--td-radius-sm);
  background: transparent;
  color: var(--td-color-fg-muted);
  cursor: pointer;
  transition:
    background-color var(--td-motion-fast) var(--td-ease-standard),
    color var(--td-motion-fast) var(--td-ease-standard);
}

.td-modal__close:hover {
  background-color: var(--td-color-surface-hover);
  color: var(--td-color-fg);
}

.td-modal__close:focus-visible {
  outline: 2px solid var(--td-color-focus);
  outline-offset: 2px;
}

.td-modal__close svg {
  width: 1rem;
  height: 1rem;
}

.td-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--td-space-5);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.td-modal__description {
  margin: 0 0 var(--td-space-4);
  color: var(--td-color-fg-muted);
  font-size: var(--td-text-sm);
  line-height: var(--td-leading-relaxed);
}

.td-modal__footer {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: flex-end;
  gap: var(--td-space-2);
  padding: var(--td-space-3) var(--td-space-5);
  padding-bottom: max(var(--td-space-3), env(safe-area-inset-bottom));
  border-top: 1px solid var(--td-color-border);
}

.td-modal-enter-active,
.td-modal-leave-active {
  transition: opacity var(--td-motion-base) var(--td-ease-standard);
}

.td-modal-enter-active .td-modal__dialog,
.td-modal-leave-active .td-modal__dialog {
  transition:
    transform var(--td-motion-base) var(--td-ease-standard),
    opacity var(--td-motion-base) var(--td-ease-standard);
}

.td-modal-enter-from,
.td-modal-leave-to {
  opacity: 0;
}

.td-modal-enter-from .td-modal__dialog,
.td-modal-leave-to .td-modal__dialog {
  opacity: 0;
  transform: translateY(var(--td-space-2));
}

@media (prefers-reduced-motion: reduce) {
  .td-modal-enter-active,
  .td-modal-leave-active,
  .td-modal-enter-active .td-modal__dialog,
  .td-modal-leave-active .td-modal__dialog {
    transition: none;
  }

  .td-modal-enter-from .td-modal__dialog,
  .td-modal-leave-to .td-modal__dialog {
    transform: none;
  }
}

.td-modal--flush {
  padding: 0;
}

.td-modal--flush .td-modal__body {
  padding: 0;
}

.td-modal__dialog--flush {
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  border: 0;
  border-radius: 0;
}

.td-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--td-space-2);
  max-width: 100%;
  border: 1px solid transparent;
  border-radius: var(--td-radius-md);
  font-family: var(--td-font-body);
  font-weight: var(--td-weight-semibold);
  line-height: var(--td-leading-tight);
  cursor: pointer;
  transition:
    background-color var(--td-motion-fast) var(--td-ease-standard),
    border-color var(--td-motion-fast) var(--td-ease-standard),
    color var(--td-motion-fast) var(--td-ease-standard);
}

.td-button--sm {
  padding: var(--td-space-1) var(--td-space-2);
  font-size: var(--td-text-xs);
}

.td-button--md {
  padding: var(--td-space-2) var(--td-space-3);
  font-size: var(--td-text-sm);
}

.td-button--lg {
  padding: var(--td-space-3) var(--td-space-4);
  font-size: var(--td-text-base);
}

.td-button--primary {
  background-color: var(--td-color-primary);
  color: var(--td-color-on-primary);
}

.td-button--primary:hover:not(:disabled) {
  background-color: var(--td-color-primary-hover);
}

.td-button--primary:active:not(:disabled) {
  background-color: var(--td-color-primary-active);
}

.td-button--secondary {
  background-color: var(--td-color-surface-raised);
  border-color: var(--td-color-border);
  color: var(--td-color-fg);
}

.td-button--secondary:hover:not(:disabled) {
  background-color: var(--td-color-surface-hover);
  border-color: var(--td-color-border-strong);
}

.td-button--secondary:active:not(:disabled) {
  background-color: var(--td-color-surface-hover);
}

.td-button--ghost {
  background-color: transparent;
  color: var(--td-color-fg-muted);
}

.td-button--ghost:hover:not(:disabled) {
  background-color: var(--td-color-surface-hover);
  color: var(--td-color-fg);
}

.td-button--ghost:active:not(:disabled) {
  background-color: var(--td-color-surface-hover);
}

.td-button--danger {
  background-color: var(--td-color-error);
  color: var(--td-color-on-error);
}

.td-button--danger:hover:not(:disabled) {
  background-color: var(--td-color-error-hover);
}

.td-button--danger:active:not(:disabled) {
  background-color: var(--td-color-error-hover);
}

.td-button:disabled {
  background-color: var(--td-color-disabled);
  border-color: transparent;
  color: var(--td-color-disabled-fg);
  cursor: not-allowed;
}

.td-button:focus-visible {
  outline: 2px solid var(--td-color-focus);
  outline-offset: 2px;
}

.td-button--block {
  width: 100%;
}

.td-button--icon-only {
  aspect-ratio: 1 / 1;
  padding: 0;
}

.td-button--icon-only.td-button--sm {
  min-width: var(--td-space-6);
  min-height: var(--td-space-6);
}

.td-button--icon-only.td-button--md {
  min-width: var(--td-space-7);
  min-height: var(--td-space-7);
}

.td-button--icon-only.td-button--lg {
  min-width: var(--td-space-8);
  min-height: var(--td-space-8);
}

.td-button--icon-only .td-button__icon {
  width: var(--td-space-5);
  height: var(--td-space-5);
}

.td-button--icon-only .td-button__icon svg {
  width: 100%;
  height: 100%;
}

.td-button__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.td-button__icon,
.td-button__spinner {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
}

.td-button__icon svg {
  width: 1em;
  height: 1em;
}

.td-button__spinner {
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--td-radius-full);
  animation: td-button-spin 700ms linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .td-button {
    transition: none;
  }

  .td-button__spinner {
    animation: none;
    border-right-color: currentColor;
    opacity: 0.6;
  }
}

.td-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--td-space-1);
  border: 1px solid transparent;
  border-radius: var(--td-radius-full);
  font-weight: var(--td-weight-medium);
  line-height: var(--td-leading-tight);
  white-space: nowrap;
}

.td-badge--sm {
  padding: 0.125rem var(--td-space-2);
  font-size: var(--td-text-xs);
}

.td-badge--md {
  padding: var(--td-space-1) var(--td-space-2);
  font-size: var(--td-text-sm);
}

.td-badge--neutral {
  background-color: var(--td-color-surface-raised);
  color: var(--td-color-fg-muted);
}

.td-badge--primary {
  background-color: var(--td-color-primary-soft);
  color: var(--td-color-primary-fg);
}

.td-badge--success {
  background-color: var(--td-color-success-soft);
  color: var(--td-color-success-fg);
}

.td-badge--info {
  background-color: var(--td-color-info-soft);
  color: var(--td-color-info-fg);
}

.td-badge--warning {
  background-color: var(--td-color-warning-soft);
  color: var(--td-color-warning-fg);
}

.td-badge--error {
  background-color: var(--td-color-error-soft);
  color: var(--td-color-error-fg);
}

.td-badge__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
}

.td-badge__icon svg {
  width: 100%;
  height: 100%;
}

.td-input {
  display: inline-flex;
  align-items: center;
  width: 100%;
  gap: var(--td-space-2);
  border: 1px solid var(--td-color-border);
  border-radius: var(--td-radius-md);
  background-color: var(--td-color-surface);
  color: var(--td-color-fg);
  transition:
    border-color var(--td-motion-fast) var(--td-ease-standard),
    box-shadow var(--td-motion-fast) var(--td-ease-standard),
    background-color var(--td-motion-fast) var(--td-ease-standard);
}

.td-input--sm {
  padding: var(--td-space-1) var(--td-space-2);
  font-size: var(--td-text-xs);
}

.td-input--md {
  padding: var(--td-space-2) var(--td-space-3);
  font-size: var(--td-text-sm);
}

.td-input--lg {
  padding: var(--td-space-3) var(--td-space-4);
  font-size: var(--td-text-base);
}

.td-input:hover:not(.td-input--disabled) {
  border-color: var(--td-color-border-strong);
}

.td-input:focus-within {
  border-color: var(--td-color-focus);
  box-shadow: 0 0 0 2px var(--td-color-focus);
}

.td-input--invalid {
  border-color: var(--td-color-error);
}

.td-input--invalid:focus-within {
  border-color: var(--td-color-error);
  box-shadow: 0 0 0 2px var(--td-color-error);
}

.td-input--disabled {
  background-color: var(--td-color-disabled);
  border-color: transparent;
  color: var(--td-color-disabled-fg);
  cursor: not-allowed;
}

.td-input--readonly {
  background-color: var(--td-color-surface-raised);
}

.td-input__control {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: var(--td-leading-normal);
}

.td-input__control::placeholder {
  color: var(--td-color-fg-dim);
}

.td-input__control:disabled {
  cursor: not-allowed;
}

.td-input__adornment {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  color: var(--td-color-fg-muted);
}

.td-input__adornment svg {
  width: 1em;
  height: 1em;
}

@media (prefers-reduced-motion: reduce) {
  .td-input {
    transition: none;
  }
}

.td-spinner {
  display: inline-block;
  flex: none;
  border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor;
  border-radius: var(--td-radius-full);
  animation: td-spinner-rotate var(--td-motion-slow) linear infinite;
}

.td-spinner--sm {
  width: 0.875rem;
  height: 0.875rem;
  border-width: 1.5px;
}

.td-spinner--md {
  width: 1.125rem;
  height: 1.125rem;
}

.td-spinner--lg {
  width: 1.5rem;
  height: 1.5rem;
  border-width: 3px;
}

@keyframes td-spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .td-spinner {
    animation-duration: 1.5s;
  }
}

.td-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--td-space-3);
  min-width: 0;
  padding: var(--td-space-8) var(--td-space-5);
  text-align: center;
  overflow-wrap: anywhere;
}

.td-empty-state--sm {
  gap: var(--td-space-2);
  padding: var(--td-space-4) var(--td-space-3);
}

.td-empty-state__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(var(--td-space-8) * 1.5);
  height: calc(var(--td-space-8) * 1.5);
  border: 1px solid var(--td-color-border);
  border-radius: var(--td-radius-full);
  background-color: var(--td-color-surface-raised);
  color: var(--td-color-fg-muted);
}

.td-empty-state__icon--bare {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background-color: transparent;
}

.td-empty-state__title {
  margin: 0;
  max-width: 100%;
  color: var(--td-color-fg);
  font-family: var(--td-font-heading);
  font-size: var(--td-text-lg);
  font-weight: var(--td-weight-semibold);
  line-height: var(--td-leading-tight);
}

.td-empty-state--sm .td-empty-state__title {
  font-size: var(--td-text-base);
}

.td-empty-state__description {
  margin: 0;
  max-width: 100%;
  color: var(--td-color-fg-muted);
  font-size: var(--td-text-sm);
  line-height: var(--td-leading-relaxed);
}

.td-empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--td-space-2);
  margin-top: var(--td-space-2);
}

.td-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--td-space-2);
  min-width: 0;
  padding: var(--td-space-6) var(--td-space-4);
  color: var(--td-color-fg-muted);
  text-align: center;
  overflow-wrap: anywhere;
}

.td-loading-state--sm {
  gap: var(--td-space-1);
  padding: var(--td-space-2);
}

.td-loading-state--inline {
  display: inline-flex;
  flex-direction: row;
  gap: var(--td-space-2);
  padding: 0;
  text-align: left;
  vertical-align: middle;
}

.td-loading-state__label {
  min-width: 0;
  color: var(--td-color-fg-muted);
  font-size: var(--td-text-sm);
  line-height: var(--td-leading-normal);
}

.td-loading-state--sm .td-loading-state__label {
  font-size: var(--td-text-xs);
}

@media (prefers-reduced-motion: reduce) {
  .td-loading-state .td-spinner {
    animation-duration: 1.5s;
  }
}

.td-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--td-space-2);
  width: 100%;
  padding: var(--td-space-3);
  border: 1px solid transparent;
  border-radius: var(--td-radius-md);
  background-color: var(--td-color-surface-raised);
  color: var(--td-color-fg);
  box-shadow: var(--td-shadow-md);
  pointer-events: auto;
}

.td-toast--success {
  background-color: var(--td-color-success-soft);
  border-color: color-mix(in srgb, var(--td-color-success) 45%, transparent);
}

.td-toast--info {
  background-color: var(--td-color-info-soft);
  border-color: color-mix(in srgb, var(--td-color-info) 45%, transparent);
}

.td-toast--warning {
  background-color: var(--td-color-warning-soft);
  border-color: color-mix(in srgb, var(--td-color-warning) 45%, transparent);
}

.td-toast--error {
  background-color: var(--td-color-error-soft);
  border-color: color-mix(in srgb, var(--td-color-error) 45%, transparent);
}

.td-toast__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.1rem;
}

.td-toast__icon svg {
  width: 100%;
  height: 100%;
}

.td-toast--success .td-toast__icon,
.td-toast--success .td-toast__title {
  color: var(--td-color-success-fg);
}

.td-toast--info .td-toast__icon,
.td-toast--info .td-toast__title {
  color: var(--td-color-info-fg);
}

.td-toast--warning .td-toast__icon,
.td-toast--warning .td-toast__title {
  color: var(--td-color-warning-fg);
}

.td-toast--error .td-toast__icon,
.td-toast--error .td-toast__title {
  color: var(--td-color-error-fg);
}

.td-toast__content {
  flex: 1 1 auto;
  min-width: 0;
}

.td-toast__title {
  margin: 0;
  font-family: var(--td-font-body);
  font-size: var(--td-text-sm);
  font-weight: var(--td-weight-semibold);
  line-height: var(--td-leading-tight);
  overflow-wrap: anywhere;
}

.td-toast__message {
  margin: var(--td-space-1) 0 0;
  color: var(--td-color-fg);
  font-family: var(--td-font-mono);
  font-size: var(--td-text-xs);
  line-height: var(--td-leading-relaxed);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.td-toast__dismiss {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--td-radius-sm);
  background: transparent;
  color: var(--td-color-fg-muted);
  cursor: pointer;
  transition:
    background-color var(--td-motion-fast) var(--td-ease-standard),
    color var(--td-motion-fast) var(--td-ease-standard);
}

.td-toast__dismiss:hover {
  background-color: color-mix(in srgb, var(--td-color-fg) 10%, transparent);
  color: var(--td-color-fg);
}

.td-toast__dismiss:focus-visible {
  outline: 2px solid var(--td-color-focus);
  outline-offset: 2px;
}

.td-toast__dismiss svg {
  width: 0.875rem;
  height: 0.875rem;
}

@media (prefers-reduced-motion: reduce) {
  .td-toast__dismiss {
    transition: none;
  }
}

.td-toast-stack {
  position: fixed;
  right: max(var(--td-space-4), env(safe-area-inset-right));
  bottom: max(var(--td-space-4), env(safe-area-inset-bottom));
  z-index: 50;
  width: 24rem;
  max-width: calc(100vw - (2 * var(--td-space-4)));
  pointer-events: none;
}

.td-toast-stack__list {
  display: flex;
  flex-direction: column;
  gap: var(--td-space-2);
}

.td-toast-enter-active,
.td-toast-leave-active,
.td-toast-move {
  transition:
    opacity var(--td-motion-base) var(--td-ease-standard),
    transform var(--td-motion-base) var(--td-ease-standard);
}

.td-toast-enter-from,
.td-toast-leave-to {
  opacity: 0;
  transform: translateY(var(--td-space-2));
}

@media (prefers-reduced-motion: reduce) {
  .td-toast-enter-active,
  .td-toast-leave-active,
  .td-toast-move {
    transition: none;
  }

  .td-toast-enter-from,
  .td-toast-leave-to {
    transform: none;
  }
}