.card {
  border-radius: var(--sys-radius-md);
  box-shadow: var(--sys-shadow-sm);
}

.card-header {
  border-bottom-color: var(--sys-border);
}

.btn {
  border-radius: var(--sys-radius-sm);
  font-weight: 600;
}

.btn-primary {
  border-color: var(--sys-primary);
  background-color: var(--sys-primary);
}

.btn-primary:hover,
.btn-primary:focus {
  border-color: var(--sys-primary-dark);
  background-color: var(--sys-primary-dark);
}

.btn-success {
  border-color: var(--sys-add);
  background-color: var(--sys-add);
}

.btn-warning {
  border-color: var(--sys-edit);
  background-color: var(--sys-edit);
}

.btn-danger {
  border-color: var(--sys-delete);
  background-color: var(--sys-delete);
}

.btn.sys-action-add,
.btn.sys-action-add:hover,
.btn.sys-action-add:focus {
  color: #fff;
  border-color: var(--sys-add);
  background-color: var(--sys-add);
}

.btn.sys-action-edit,
.btn.sys-action-edit:hover,
.btn.sys-action-edit:focus {
  color: #fff;
  border-color: var(--sys-edit);
  background-color: var(--sys-edit);
}

.btn.sys-action-delete,
.btn.sys-action-delete:hover,
.btn.sys-action-delete:focus {
  color: #fff;
  border-color: var(--sys-delete);
  background-color: var(--sys-delete);
}

.sys-customizer .card {
  overflow: hidden;
}

.sys-color-field {
  display: flex;
  align-items: center;
  gap: var(--sys-space-2);
  min-height: 42px;
  padding: var(--sys-space-1) var(--sys-space-2);
  border: 1px solid var(--sys-border);
  border-radius: var(--sys-radius-sm);
}

.sys-color-field input[type="color"] {
  width: 50px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
}

.sys-theme-preview {
  overflow: hidden;
  min-height: 330px;
  color: var(--preview-text);
  background: var(--preview-background);
  border: 1px solid var(--sys-border);
  border-radius: var(--sys-radius-lg);
  box-shadow: var(--sys-shadow-sm);
}

.sys-theme-preview__top {
  display: flex;
  align-items: center;
  gap: var(--sys-space-3);
  min-height: 72px;
  padding: var(--sys-space-3);
  color: #fff;
  background: var(--preview-top);
}

.sys-theme-preview__top img {
  width: 100px;
  height: 42px;
  object-fit: contain;
  background: #fff;
  border-radius: var(--sys-radius-sm);
}

.sys-theme-preview__body {
  padding: var(--sys-space-4);
}

.sys-theme-preview__card {
  padding: var(--sys-space-3);
  background: var(--sys-surface);
  border-top: 4px solid var(--preview-primary);
  border-radius: var(--sys-radius-md);
  box-shadow: var(--sys-shadow-sm);
}

.sys-theme-preview__icons {
  display: flex;
  gap: 12px;
  margin: 10px 0 14px;
  color: var(--preview-icons);
  font-size: 17px;
}

.modal-content {
  border: 0;
  border-radius: var(--sys-radius-lg);
  box-shadow: var(--sys-shadow-md);
}

.modal-header,
.modal-footer {
  border-color: var(--sys-border);
}

.alert {
  border-radius: var(--sys-radius-md);
}

.badge {
  padding: 0.35em 0.55em;
}

.sys-page-loader {
  position: fixed;
  z-index: 2000;
  inset: 0;
  display: flex;
  visibility: hidden;
  align-items: center;
  justify-content: center;
  opacity: 0;
  background: rgba(244, 246, 249, 0.88);
  backdrop-filter: blur(2px);
  transition: opacity var(--sys-transition), visibility var(--sys-transition);
}

.sys-page-loader.is-visible {
  visibility: visible;
  opacity: 1;
}

.sys-page-loader__content {
  display: flex;
  align-items: center;
  gap: var(--sys-space-2);
  padding: var(--sys-space-3) var(--sys-space-4);
  color: var(--sys-primary-dark);
  background: var(--sys-surface);
  border: 1px solid var(--sys-border);
  border-radius: var(--sys-radius-lg);
  box-shadow: var(--sys-shadow-md);
  font-weight: 600;
}

.sys-page-loader__spinner {
  width: 1.5rem;
  height: 1.5rem;
  border: 0.2rem solid rgba(91, 42, 110, 0.2);
  border-top-color: var(--sys-primary);
  border-radius: 50%;
  animation: sys-page-loader-spin 0.7s linear infinite;
}

@keyframes sys-page-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sys-page-loader,
  .sys-page-loader__spinner {
    transition: none;
    animation: none;
  }
}