.configuracoes-page,
.recuperacao-page {
  display: grid;
  gap: var(--space-6);
}

.configuracoes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-5);
}

.settings-card {
  min-width: 0;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-card);
}

.settings-card--wide {
  grid-column: 1 / -1;
}

.settings-card--danger {
  border-color: color-mix(in srgb, var(--color-danger) 24%, var(--color-border));
}

.settings-card__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.settings-card__icon {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  flex: 0 0 auto;
  color: var(--color-primary-strong);
  background: var(--color-primary-soft);
  border-radius: var(--radius-medium);
}

.settings-card--danger .settings-card__icon {
  color: var(--color-danger);
  background: var(--color-danger-soft);
}

.settings-card__heading {
  min-width: 0;
}

.settings-card__heading h2 {
  margin: 0;
  font-size: var(--font-size-lg);
}

.settings-card__heading p {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.settings-card__body {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
}

.appearance-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.appearance-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-4);
  color: var(--color-text);
  text-align: left;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
}

.appearance-option:hover {
  border-color: color-mix(in srgb, var(--color-primary) 38%, var(--color-border));
}

.appearance-option:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-primary) 28%, transparent);
  outline-offset: 2px;
}

.appearance-option.is-selected {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

.appearance-option__icon {
  display: grid;
  width: 2.4rem;
  height: 2.4rem;
  place-items: center;
  color: var(--color-primary-strong);
  background: var(--color-surface-elevated);
  border-radius: var(--radius-small);
}

.appearance-option__content {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
}

.appearance-option__content strong {
  font-size: var(--font-size-sm);
}

.appearance-option__content > span {
  color: var(--color-muted);
  font-size: var(--font-size-xs);
  line-height: 1.45;
}

.appearance-status,
.settings-note,
.settings-data-summary {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.settings-actions,
.recovery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.about-list,
.backup-summary-list {
  display: grid;
  gap: 0;
  margin: 0;
}

.about-list > div,
.backup-summary-list > div {
  display: grid;
  grid-template-columns: minmax(8rem, 0.7fr) minmax(0, 1.3fr);
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.about-list > div:first-child,
.backup-summary-list > div:first-child {
  padding-top: 0;
}

.about-list > div:last-child,
.backup-summary-list > div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.about-list dt,
.backup-summary-list dt {
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

.about-list dd,
.backup-summary-list dd {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 750;
  overflow-wrap: anywhere;
}

.backup-import-summary,
.delete-all-summary {
  display: grid;
  gap: var(--space-4);
}

.backup-import-summary__warning,
.delete-all-summary__warning {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  color: var(--color-warning);
  background: var(--color-warning-soft);
  border: 1px solid color-mix(in srgb, var(--color-warning) 24%, var(--color-border));
  border-radius: var(--radius-small);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.delete-all-summary > p:first-child {
  margin: 0;
}

.delete-all-summary__impact {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.delete-all-summary__impact li {
  padding: var(--space-3);
  color: var(--color-danger);
  text-align: center;
  background: var(--color-danger-soft);
  border-radius: var(--radius-small);
  font-size: var(--font-size-sm);
  font-weight: 800;
}

.delete-all-summary__step {
  display: grid;
  gap: var(--space-4);
}

.delete-all-summary__step h3,
.delete-all-summary__step p {
  margin: 0;
}

.delete-all-summary__final-warning {
  padding: var(--space-4);
  color: var(--color-danger);
  background: var(--color-danger-soft);
  border: 1px solid color-mix(in srgb, var(--color-danger) 30%, var(--color-border));
  border-radius: var(--radius-small);
  font-size: var(--font-size-sm);
  font-weight: 750;
  line-height: 1.5;
}

.backup-import-actions {
  justify-content: space-between;
}

.modal--backup-import {
  width: min(42rem, 100%);
}

.recovery-guide {
  padding: var(--space-5);
}

.recovery-guide h2 {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-lg);
}

.recovery-guide ol {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding-left: 1.4rem;
  color: var(--color-muted-strong);
}

.recovery-guide li {
  padding-left: var(--space-2);
  line-height: 1.55;
}

.recovery-raw-preview {
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-card);
}

.recovery-raw-preview summary {
  padding: var(--space-4) var(--space-5);
  color: var(--color-text);
  cursor: pointer;
  font-weight: 800;
}

.recovery-raw-preview pre {
  max-height: 20rem;
  margin: 0;
  padding: var(--space-5);
  overflow: auto;
  color: var(--color-muted-strong);
  background: var(--color-surface-soft);
  border-top: 1px solid var(--color-border);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: var(--font-size-xs);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 52rem) {
  .configuracoes-grid {
    grid-template-columns: 1fr;
  }

  .settings-card--wide {
    grid-column: auto;
  }

  .appearance-options {
    grid-template-columns: 1fr;
  }

  .backup-import-actions {
    justify-content: flex-end;
  }

  .backup-import-actions .button:first-child {
    width: 100%;
    margin-right: 0;
  }
}

@media (max-width: 34rem) {
  .settings-card__header,
  .settings-card__body,
  .recovery-guide {
    padding: var(--space-4);
  }

  .settings-actions .button,
  .recovery-actions .button {
    width: 100%;
  }

  .about-list > div,
  .backup-summary-list > div {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .delete-all-summary__impact {
    grid-template-columns: 1fr;
  }
}

.delete-all-summary__confirmation-field {
  padding: var(--space-4);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
}

.delete-all-summary__confirmation-field input {
  font-weight: 800;
  letter-spacing: 0.08em;
}