.ds-button,
.primary,
.danger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  min-height: var(--ds-control-height-md);
  padding: 0 var(--ds-space-4);
  border-radius: var(--ds-radius-md);
  font-weight: 700;
  line-height: 1.2;
}

.ds-button--primary,
.primary {
  color: #ffffff !important;
  border-color: var(--ds-color-brand) !important;
  background: var(--ds-color-brand) !important;
  box-shadow: none;
}

.ds-button--primary:hover,
.primary:hover {
  border-color: var(--ds-color-brand-hover) !important;
  background: var(--ds-color-brand-hover) !important;
}

.ds-button--danger,
.danger-btn {
  color: var(--ds-color-danger);
  border-color: #edb6b1;
  background: var(--ds-color-surface);
}

.ds-icon-button,
.close {
  display: inline-grid;
  place-items: center;
  flex: 0 0 var(--ds-control-height-sm);
  width: var(--ds-control-height-sm);
  height: var(--ds-control-height-sm);
  padding: 0;
  border-radius: 50%;
}

.ds-panel,
.panel,
.auth-card,
.modal section {
  border-radius: var(--ds-radius-lg);
}

.auth-card {
  gap: 10px;
  padding: 28px 32px;
}

.auth-logo {
  width: min(210px, 72%);
  margin-bottom: 0;
}

.auth-form {
  gap: 10px;
  margin-top: 4px;
}

.ui-tabs {
  gap: var(--ds-space-1);
}

.ui-tab {
  min-height: var(--ds-control-height-sm);
  border-radius: var(--ds-radius-md);
}

.ui-tab.active {
  color: #ffffff;
  border-color: var(--ds-color-ink);
  background: var(--ds-color-ink);
}

.ui-state {
  border-radius: var(--ds-radius-lg);
}

.ui-error {
  color: #8f2f28;
  border: 1px solid #edb6b1;
  background: #fff4f2;
}

.ui-drawer {
  z-index: var(--ds-z-overlay);
}

.ui-drawer-backdrop,
.overlay-bg {
  background: var(--ds-color-overlay);
}

.ui-drawer-panel {
  box-shadow: var(--ds-shadow-overlay);
}

.toast {
  z-index: var(--ds-z-toast);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-ink);
  box-shadow: var(--ds-shadow-raised);
}

.ds-field {
  display: grid;
  gap: var(--ds-space-2);
  color: var(--ds-color-muted);
  font-size: var(--ds-font-size-sm);
}

.ds-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-3);
}

.ds-stack {
  display: grid;
  gap: var(--ds-space-4);
}

.ds-badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  min-height: 24px;
  padding: 0 var(--ds-space-2);
  border-radius: var(--ds-radius-round);
  color: var(--ds-color-muted);
  background: var(--ds-color-surface-subtle);
  font-size: var(--ds-font-size-xs);
  font-weight: 700;
}

@media (max-width: 760px) {
  .auth-card {
    gap: 8px;
    padding: 20px 18px;
  }

  .auth-logo {
    width: min(168px, 58vw);
  }
}