* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-family-base);
  color: var(--color-text-body);
}

.page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  background: url("../assets/background.jpg") center/cover no-repeat;
}

.card {
  position: relative;
  width: 100%;
  max-width: 560px;
  background: var(--color-surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-10);
}

.card__logo {
  height: 40px;
  margin-bottom: var(--space-6);
}

.card__heading {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  margin: 0 0 var(--space-2);
  color: var(--color-text-heading);
  font-weight: var(--font-weight-bold);
}

.card__info {
  background: var(--color-status-info-bg);
  color: var(--color-status-info-text);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-6);
  font-size: var(--font-size-sm);
}

.card__info-line {
  margin: 0;
}

.card__info-line + .card__info-line {
  margin-top: var(--space-2);
}

.status {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-5);
  font-size: var(--font-size-sm);
}

.status--error {
  background: var(--color-status-error-bg);
  color: var(--color-status-error-text);
}

.status--success {
  background: var(--color-status-success-bg);
  color: var(--color-status-success-text);
}

#save-status.status {
  margin-top: var(--space-4);
  margin-bottom: 0;
}

.prefs-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-6);
}

.prefs-table tr {
  border-bottom: 1px solid var(--color-border-subtle);
}

.prefs-table__row--highlight {
  background: var(--color-status-info-bg);
}

.prefs-table__row--highlight td {
  font-weight: var(--font-weight-semibold);
}

.prefs-table td {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-base);
}

.prefs-table td:last-child {
  text-align: right;
  width: 40px;
}

.prefs-table input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--color-action-default);
}

.save-button {
  width: 100%;
  padding: var(--space-3-5);
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-action-default);
  color: var(--color-text-on-brand);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.save-button:hover {
  background: var(--color-action-hover);
}

.save-button:disabled {
  opacity: 0.6;
  cursor: default;
}

.loading-mask {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-10);
  background: var(--color-surface-card);
  border-radius: var(--radius-lg);
  text-align: center;
  z-index: 1;
}

.loading-mask[hidden] {
  display: none;
}

.loading-mask__spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--color-brand-50);
  border-top-color: var(--color-brand-500);
  border-radius: 50%;
  animation: loading-mask-spin 0.8s linear infinite;
}

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

.loading-mask__message {
  margin: 0;
  max-width: 360px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-status-warning-bg);
  color: var(--color-status-warning-text);
  font-size: var(--font-size-sm);
}