@layer components {
  .settings { display: grid; }
  .settings-row { display: flex; align-items: center; gap: var(--sp-3); min-height: 64px; padding: 10px 2px; }
  .settings-row:not(:first-child) { border-top: 1px solid var(--line); }
  .settings-row__info { flex: 1; min-width: 0; }
  .settings-row__label { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-2); }
  .settings-row__value { font-weight: var(--fw-bold); overflow-wrap: anywhere; }
  .settings-row__value--secret { letter-spacing: .15em; }

  .settings-form {
    margin: 0 0 var(--sp-3); padding: var(--sp-4);
    border-radius: var(--r-l); background: var(--surface-2);
    animation: fade-in var(--t-base) var(--ease);
  }
  .settings-form .field__control { background: var(--surface); border-color: var(--line); }
  .settings-form .field__control:focus { border-color: var(--brand); }
  .settings-form .field__control[aria-invalid="true"] { border-color: var(--danger); }
}